add classNames

calvo-jp · Feb 27, 2024 · 6d1376f · 6d1376f
1 parent 6003577
commit 6d1376f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 20 deletions.
diff --git a/scripts/src/icons/config.mjs b/scripts/src/icons/config.mjs
@@ -5,4 +5,5 @@ export const config = {
   strokeWidth: '2',
   ariaHidden: 'true',
   viewBox: '0 0 24 24',
+  className: 'untitled-icon',
 };
diff --git a/scripts/src/icons/format.mjs b/scripts/src/icons/format.mjs
@@ -19,12 +19,18 @@ let cache_0 = create_lru_cache(1000);
 /**
  * @param {string} content
  */
-export async function format_html(content) {
+export async function format_svelte(content) {
   let v = cache_0.get(content);
 
   if (v) return v;
 
-  v = await prettier.format(content, {...(await get_config()), parser: 'html'});
+  v = await prettier.format(content, {
+    ...(await get_config()),
+    htmlWhitespaceSensitivity: 'ignore',
+    embeddedLanguageFormatting: 'off',
+    parser: 'html',
+  });
+
   cache_0.set(content, v);
   return v;
 }

diff --git a/scripts/src/icons/generate-icons-react.mjs b/scripts/src/icons/generate-icons-react.mjs
@@ -44,6 +44,9 @@ export async function generate_icons_react() {
   await create_barrel_file(outdir, items);
 }
 
+const REF = 'REF';
+const REST = 'REST';
+
 /**
  * @param {import('./get-icons.mjs').Icon} icon
  */
@@ -52,12 +55,19 @@ async function to_react_component(icon) {
     camelcase: true,
     transformNode(node) {
       if (node.name === 'svg') {
-        node.attributes['ref'] = '';
-        node.attributes['rest'] = '';
-        node.attributes['width'] = config.width;
-        node.attributes['height'] = config.height;
-        node.attributes['viewBox'] = config.viewBox;
-        node.attributes['aria-hidden'] = config.ariaHidden;
+        return {
+          ...node,
+          attributes: {
+            [REF]: '',
+            ...node.attributes,
+            width: config.width,
+            height: config.height,
+            viewBox: config.viewBox,
+            className: config.className,
+            ['aria-hidden']: config.ariaHidden,
+            [REST]: '',
+          },
+        };
       }
 
       return node;
@@ -67,14 +77,18 @@ async function to_react_component(icon) {
   const react_svg = svgson.stringify(node, {
     selfClose: true,
     transformAttr(key, value, esc) {
-      if (key === 'ref') {
+      if (key === REF) {
         return 'ref={ref}';
-      } else if (key === 'rest') {
+      } else if (key === REST) {
         return '{...props}';
       } else if (key === 'stroke') {
         return `${key}="${config.stroke}"`;
       } else if (key === 'strokeWidth') {
         return `${key}="${config.strokeWidth}"`;
+      } else if (key === 'className') {
+        const classes = `${config.className} ${icon.filename}-icon`;
+
+        return `${key}={\`${classes} \${className}\`.trim()}`;
       } else {
         return `${key}="${esc(value)}"`;
       }
@@ -114,7 +128,7 @@ function template(config) {
 		/**
 		 * ${config.jsdoc}
 		 */
-		const ${config.name} = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => {
+		const ${config.name} = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(({className="", ...props}, ref) => {
 			return ${config.content};
 		});
 

diff --git a/scripts/src/icons/generate-icons-svelte.mjs b/scripts/src/icons/generate-icons-svelte.mjs
@@ -5,7 +5,7 @@ import {config} from './config.mjs';
 import {create_barrel_file} from './create-barrel-file.mjs';
 import {create_clean_dir} from './create-clean-dir.mjs';
 import {dash_to_pascal} from './dash-to-pascal.mjs';
-import {format_html} from './format.mjs';
+import {format_svelte} from './format.mjs';
 import {generate_jsdoc_preview} from './generate-jsdoc-preview.mjs';
 import {get_icons} from './get-icons.mjs';
 import {get_workspace_root} from './get-workspace-root.mjs';
@@ -22,7 +22,7 @@ export async function generate_icons_svelte() {
       const Component = await to_svelte_component(icon);
       const destination = path.join(outdir, `${icon.filename}.svelte`);
 
-      await fs.writeFile(destination, await format_html(Component.content), {encoding: 'utf-8'});
+      await fs.writeFile(destination, await format_svelte(Component.content), {encoding: 'utf-8'});
 
       /**
        * @type {import('./create-barrel-file.mjs').BarrelItem}
@@ -44,18 +44,26 @@ export async function generate_icons_svelte() {
   await create_barrel_file(outdir, items);
 }
 
+const REST = 'REST';
+
 /**
  * @param {import('./get-icons.mjs').Icon} icon
  */
 async function to_svelte_component(icon) {
   const node = await svgson.parse(icon.content, {
     transformNode(node) {
       if (node.name === 'svg') {
-        node.attributes['rest'] = '';
-        node.attributes['width'] = config.width;
-        node.attributes['height'] = config.height;
-        node.attributes['viewBox'] = config.viewBox;
-        node.attributes['aria-hidden'] = config.ariaHidden;
+        return {
+          ...node,
+          attributes: {
+            width: config.width,
+            height: config.height,
+            viewBox: config.viewBox,
+            class: config.className,
+            'aria-hidden': config.ariaHidden,
+            [REST]: '',
+          },
+        };
       }
 
       return node;
@@ -65,12 +73,16 @@ async function to_svelte_component(icon) {
   const svelte_svg = svgson.stringify(node, {
     selfClose: true,
     transformAttr(key, value, esc) {
-      if (key === 'rest') {
+      if (key === REST) {
         return '{...props}';
       } else if (key === 'stroke') {
         return `${key}="${config.stroke}"`;
       } else if (key === 'stroke-width') {
         return `${key}="${config.strokeWidth}"`;
+      } else if (key === 'class') {
+        const classes = `${config.className} ${icon.filename}-icon`;
+
+        return `${key}="{('${classes} ' + className).trim()}"`;
       } else {
         return `${key}="${esc(value)}"`;
       }
@@ -104,7 +116,7 @@ function template(config) {
 		<script lang="ts">
 			import type {SVGAttributes} from 'svelte/elements';
 
-			let {...props} = $props<SVGAttributes<SVGSVGElement>>();  
+			let {class: className = '', ...props} = $props<SVGAttributes<SVGSVGElement>>();  
 		</script>
 
 		<!-- @component ${config.jsdoc} -->