diff --git a/src/_includes/webc/custom-svg.webc b/src/_includes/webc/custom-svg.webc
index 4d07763..6e7a4de 100644
--- a/src/_includes/webc/custom-svg.webc
+++ b/src/_includes/webc/custom-svg.webc
@@ -1,10 +1,11 @@
 <!-- by Ryan Mulligan: https://github.com/hexagoncircle/start-me-up/blob/main/src/_includes/inline-svg.webc -->
 
 <script webc:type="render" webc:is="template">
-  const Image = require('@11ty/eleventy-img');
-  const {optimize} = require('svgo');
+  export default async function () {
+    const {default: slugify} = await import('slugify');
+    const {default: Image} = await import('@11ty/eleventy-img');
+    const {optimize} = await import('svgo');
 
-  module.exports = async function () {
     const meta = await Image(this.src, {
       formats: ['svg'],
       dryRun: true
@@ -19,7 +20,7 @@
 
       for (const prop in this.webc.attributes) {
         if (!excludeAttributes.includes(prop)) {
-          const attribute = this.slugify(prop, {decamelize: true});
+          const attribute = slugify(prop, {lower: true, strict: true, remove: /[*+~.()'"!:@]/g});
           const value = this.webc.attributes[prop];
 
           arr.push({[attribute]: value});
@@ -41,5 +42,5 @@
     const result = optimize(svgContents, {plugins});
 
     return result.data;
-  };
+  }
 </script>