feat(Icon): add lucide icons

package.json

@@ -138,6 +138,7 @@
     "husky": "9.1.7",
     "jsdom": "25.0.1",
     "lint-staged": "15.2.10",
+    "lucide": "0.460.0",
     "postcss": "8.4.49",
     "remixicon": "4.5.0",
     "sass": "1.81.0",

scripts/generate-icons.mjs

@@ -5,7 +5,8 @@ import fs from 'fs-extra';
 import { pascalCase } from 'scule';
 import { XMLParser } from 'fast-xml-parser';
 
-const PREFIX = 'ri-';
+const REMIX_PREFIX = 'ri-';
+const LUCIDE_PREFIX = 'lu-';
 const TARGET = 'src/icons/';
 const CHUNK_SIZE = 500;
 
@@ -17,6 +18,10 @@ function resolveRemixIconDir() {
   return resolveRoot('node_modules', 'remixicon', 'icons');
 }
 
+function resolveLucideIconDir() {
+  return resolveRoot('node_modules', 'lucide', 'dist', 'esm', 'icons');
+}
+
 function resolveCustomIconDir() {
   return resolveRoot('src', 'custom-icons');
 }
@@ -43,7 +48,17 @@ function getPathFromSvgString(svg) {
     ignoreAttributes: false,
   });
   const obj = parser.parse(svg);
-  return obj.svg.path['@_d'];
+
+  function findFirstPath(node) {
+    if (node.path)
+      return node.path;
+    if (node.g)
+      return findFirstPath(node.g);
+    return null;
+  }
+
+  const path = findFirstPath(obj.svg);
+  return path['@_d'];
 }
 
 async function getAllSvgDataFromPath(pathDir) {
@@ -57,25 +72,58 @@ async function getAllSvgDataFromPath(pathDir) {
     });
     return res;
   }
-  else if (type.isFile()) {
-    try {
-      const name = PREFIX + path.basename(pathDir).replace('.svg', '');
-      const generatedName = pascalCase(name);
-      const svg = await readFile(pathDir, 'utf8');
-      const svgPath = getPathFromSvgString(svg);
-
-      return [
-        {
-          name,
-          generatedName,
-          svgPath,
-        },
-      ];
-    }
-    catch (error) {
-      consola.warn(`Error while processing ${pathDir}`, error);
-      return [];
-    }
+
+  try {
+    const name = REMIX_PREFIX + path.basename(pathDir).replace('.svg', '');
+    const generatedName = pascalCase(name);
+    const svg = await readFile(pathDir, 'utf8');
+    const svgPath = getPathFromSvgString(svg);
+
+    return [
+      {
+        name,
+        generatedName,
+        components: [
+          ['path', { d: svgPath }],
+        ],
+      },
+    ];
+  }
+  catch (error) {
+    consola.warn(`Error while processing ${pathDir}`, error);
+    return [];
+  }
+}
+
+async function getLucideSvgDataFromPath(pathDir) {
+  const type = await lstat(pathDir);
+  if (type.isDirectory()) {
+    const res = [];
+    const dirs = await readdir(pathDir);
+    await loop(dirs, async (child) => {
+      if (child.endsWith('.js')) {
+        res.push(...(await getLucideSvgDataFromPath(`${pathDir}/${child}`)));
+      }
+    });
+    return res;
+  }
+
+  try {
+    const filePath = path.basename(pathDir).replace('.js', '');
+    const name = LUCIDE_PREFIX + filePath;
+    const generatedName = pascalCase(name);
+    const iconModule = await import(`${pathDir}`);
+    const components = iconModule.default[2];
+
+    return [{
+      name,
+      generatedName,
+      components,
+    }];
+  }
+  catch (error) {
+    consola.warn(`Error while processing ${pathDir}`, error);
+    return [];
   }
 }
 
@@ -87,6 +135,8 @@ async function collectAllIconMetas() {
     res.push(...(await getAllSvgDataFromPath(dir)));
   });
 
+  res.push(...(await getLucideSvgDataFromPath(resolveLucideIconDir())));
+
   return res;
 }
 
@@ -114,7 +164,7 @@ import { type GeneratedIcon } from '@/types/icons';\n
     await loop(chunk, (icon) => {
       chunkFileContent += `export const ${icon.generatedName}: GeneratedIcon = {
   name: '${icon.name}',
-  path: '${icon.svgPath}',
+  components: ${JSON.stringify(icon.components)},
 };\n`;
 
       names.push(icon.name);

src/components/icons/RuiIcon.stories.ts

@@ -27,7 +27,7 @@ const meta: Meta<Props> = {
     docs: {
       description: {
         component:
-          'All icons can be seen here: <a target="_blank" href="https://remixicon.com/">https://remixicon.com/</a>. Use it <b>without</b> prefix `ri-`',
+          'We provide icons from <a target="_blank" href="https://remixicon.com/">Remix icons</a> and <a target="_blank" href="https://lucide.dev/icons">Lucide icons</a>. For remix icons use it without prefix `ri-` (eg: arrow-down-circle-fill), while for lucide icon, you need to add prefix `lu-` (eg: lu-arrow-down).',
       },
     },
   },
@@ -70,4 +70,20 @@ export const SecondaryTiny: Story = {
   },
 };
 
+export const LucideIconPrimary: Story = {
+  args: {
+    color: 'primary',
+    name: 'lu-arrow-down',
+    size: 24,
+  },
+};
+
+export const LucideIconPrimaryLarge: Story = {
+  args: {
+    color: 'primary',
+    name: 'lu-arrow-down',
+    size: 48,
+  },
+};
+
 export default meta;

src/components/icons/RuiIcon.vue

@@ -19,12 +19,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const { registeredIcons } = useIcons();
 
-const path: ComputedRef<string | undefined> = computed(() => {
+const isLucide = computed(() => props.name.startsWith('lu-'));
+
+const components: ComputedRef<[string, Record<string, string>][] | undefined> = computed(() => {
   const name = props.name;
   if (!isRuiIcon(name)) {
     console.warn(`icon ${name} must be a valid RuiIcon`);
   }
-  const iconName = `ri-${name}`;
+  const prefix = get(isLucide) ? '' : 'ri-';
+  const iconName = `${prefix}${name}`;
   const found = registeredIcons[iconName];
 
   if (!found) {
@@ -42,9 +45,16 @@ const path: ComputedRef<string | undefined> = computed(() => {
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      :d="path"
-      fill="currentColor"
+    <component
+      :is="component[0]"
+      v-for="(component, index) in components"
+      :key="index"
+      v-bind="component[1]"
+      :fill="isLucide ? 'none' : 'currentColor'"
+      :stroke="isLucide ? 'currentColor' : 'none'"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
     />
   </svg>
 </template>

src/composables/icons.ts

@@ -73,7 +73,7 @@ export interface IconsOptions {
 }
 
 export interface UseIconsReturn {
-  registeredIcons: Readonly<Record<string, string>>;
+  registeredIcons: Readonly<Record<string, [string, Record<string, string>][]>>;
 }
 
 export const IconsSymbol: InjectionKey<UseIconsReturn> = Symbol.for('rui:icons');
@@ -86,7 +86,7 @@ export function createIconDefaults(options?: Partial<IconsOptions>): UseIconsRet
         [
           ...requiredIcons,
           ...iconsToAdd,
-        ].map(({ name, path }) => [name, path]),
+        ].map(({ components, name }) => [name, components]),
       ),
     },
   };

src/types/icons.ts

@@ -1,4 +1,4 @@
 export interface GeneratedIcon {
   name: string;
-  path: string;
+  components: [string, Record<string, string>][];
 }