Update Vue and Svelte packages

Author: ProCode-Software

packages/proicons-svelte/src/CreateIcon.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-import { convertNodesWithConfig, renderNodeWithRoot } from './utils'
-import { kebabCase } from './utils'
-import type { ProIconAttributes } from './types'
+import type { IconNode, ProIconAttributes } from './types'
+import { convertNodesWithConfig, kebabCase } from './utils'
 
-type IconNode = [string, Record<string, string>, IconNode[]]
 type Props = ProIconAttributes & {
     icon: {
         name: string
@@ -36,27 +34,38 @@ const customizationOptions = {
     cornerRadius,
     size,
 }
+const customizedNodes = convertNodesWithConfig(nodes, customizationOptions)
 
-const rootNode: IconNode = [
-    'svg',
-    {
-        width: size ?? 24,
-        height: size ?? 24,
-        xmlns: 'http://www.w3.org/2000/svg',
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        class: ['proicon', props?.class ?? ''].join(''),
-        'data-proicon-id': kebabCase(name),
-        ...props,
-    },
-    [],
-]
-
-const iconHtml = renderNodeWithRoot(
-    convertNodesWithConfig(nodes, customizationOptions),
-    rootNode,
-    customizationOptions
-)
+// svelte-ignore non_reactive_update
+let className: string | any[] = 'proicon'
+if (props?.class) {
+    if (typeof props.class == 'string') className += ` ${props.class}`
+    else className = [className, props.class]
+}
 </script>
 
-{@html iconHtml}
+<svg
+    width={size ?? 24}
+    height={size ?? 24}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    class={className}
+    data-proicon-id={kebabCase(name)}
+    {...props}
+>
+    {#snippet node(tag, p, children)}
+        <svelte:element this={tag} {...p}>
+            {#each children as [tag2, p2, children2]}
+                {@render node(tag2, p2, children2)}
+            {/each}
+        </svelte:element>
+    {/snippet}
+    {#each customizedNodes as [tag, p, children]}
+        <svelte:element this={tag} {...p}>
+            {#each children as [tag2, p2, children2]}
+                {@render node(tag2, p2, children2)}
+            {/each}
+        </svelte:element>
+    {/each}
+</svg>

packages/proicons-svelte/src/types.ts

@@ -1,5 +1,7 @@
 import type { SVGAttributes } from 'svelte/elements'
 
+export type IconNode = [string, Record<string, any>, IconNode[]]
+
 export interface ProIconsOptions {
     /** Determines the color of the icons. Defaults to `currentColor`. */
     color?: string

packages/proicons-svelte/test/App.svelte

@@ -19,6 +19,6 @@ const increment = () => {
     </div>
 
     <p></p>
-    <AddSquareMultipleIcon size={48} strokeWidth={2} />
+    <AddSquareMultipleIcon size={48} strokeWidth={2} class="myClass" />
     <ProIcon icon="Add" strokeWidth={2} color="red" />
 </main>

packages/proicons-vue/src/ProIcon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kebabCase, pascalCase } from '../../../src/rename'
+import { kebabCase, pascalCase } from './rename'
 import { ProIconAttributes } from './types'
 import * as icons from './icons'
 

packages/proicons-vue/src/createIcon.ts

@@ -1,6 +1,6 @@
 import { type FunctionalComponent, h } from 'vue'
-import { kebabCase, kebabToPascalCase, pascalToCamelCase } from '../../../src/rename'
-import { convertNodesWithConfig } from '../../../src/renderNodes'
+import { kebabCase, kebabToPascalCase, pascalToCamelCase } from './rename'
+import { convertNodesWithConfig } from './renderNodes'
 import { type ProIconAttributes } from './types'
 
 export type IconNode = [string, Record<string, string>, IconNode[]]
@@ -32,7 +32,7 @@ export function createIcon(
                 xmlns: 'http://www.w3.org/2000/svg',
                 viewBox: '0 0 24 24',
                 fill: 'none',
-                class: ['proicon', props.class].flat(),
+                class: ['proicon', props.class],
                 'data-proicon-id': kebabCase(name),
                 ...props,
             },

packages/proicons-vue/src/rename.ts

@@ -0,0 +1 @@
+../../../src/rename.ts

packages/proicons-vue/src/renderNodes.ts

@@ -0,0 +1 @@
+../../../src/renderNodes.ts

packages/proicons-vue/tsconfig.json

@@ -29,8 +29,8 @@
         "rootDir": "./src"
     },
     "include": [
-        "**/*.ts",
-        "**/*.tsx",
-        "**/*.vue"
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue"
     ]
 }

src/renderNodes.ts

@@ -23,37 +23,34 @@ export function convertNodesWithConfig(nodes: IconNode[], options?: ProIconsOpti
         strokeCaps: ["stroke-linejoin"],
         strokeJoin: ["stroke-linecap"],
         cornerRadius: ["rx"],
-        strokeFilledElements: undefined,
     }
 
     if (!options) return nodes
 
     return nodes.map(node => {
-        const children = node[2]
+        const [_, props, children] = node
 
         for (const [optionK, svgAttrs] of Object.entries(attributeKey)) {
-            if (svgAttrs) {
-                for (const s of svgAttrs) {
-                    if (node[1][s] && options[optionK]) {
-                        node[1][s] = options[optionK]
-                    }
+            for (const s of svgAttrs) {
+                if (props[s] && options[optionK]) {
+                    props[s] = options[optionK]
                 }
             }
         }
 
         // Outlining
         if (
-            !Object.hasOwn(node[1], 'stroke-width') &&
-            Object.hasOwn(node[1], 'fill') &&
-            node[1].fill != 'none' &&
-            node[1].stroke != 'none' &&
-            node[1]['stroke-width'] !== '0' &&
+            !Object.hasOwn(props, 'stroke-width') &&
+            Object.hasOwn(props, 'fill') &&
+            props.fill != 'none' &&
+            props.stroke != 'none' &&
+            props['stroke-width'] !== '0' &&
             (options?.strokeWidth ?? 0) > defaultStroke
         ) {
-            node[1]['stroke-width'] = (options.strokeWidth - defaultStroke).toString()
-            node[1].stroke = node[1].fill
-            node[1]['stroke-linecap'] = options.strokeCaps ?? 'round'
-            node[1]['stroke-linejoin'] = options.strokeJoin ?? 'round'
+            props['stroke-width'] = (options.strokeWidth - defaultStroke).toString()
+            props.stroke = props.fill
+            props['stroke-linecap'] = options.strokeCaps ?? 'round'
+            props['stroke-linejoin'] = options.strokeJoin ?? 'round'
         }
 
         if (children.length) {
@@ -65,16 +62,17 @@ export function convertNodesWithConfig(nodes: IconNode[], options?: ProIconsOpti
 
 export function renderNodeWithRoot(nodes: IconNode[], rootNode: IconNode, options: ProIconsOptions): string {
     const root = structuredClone(rootNode)
-    root[2].push(...nodes)
+    const [_, props, children] = root
+    children.push(...nodes)
 
     if (options?.size) {
-        root[1].width = options.size.toString()
-        root[1].height = options.size.toString()
+        props.width = options.size.toString()
+        props.height = options.size.toString()
     }
 
     if (options?.attributes) {
         for (const [k, v] of Object.entries(options.attributes)) {
-            root[1][k] = v
+            props[k] = v
         }
     }