Format code

packages/lucide-vue-next/src/createLucideIcon.ts

@@ -4,14 +4,13 @@ import defaultAttributes from './defaultAttributes';
 
 // Create interface extending SVGAttributes
 export interface SVGProps extends Partial<SVGAttributes> {
-  size?: 24 | number
+  size?: 24 | number;
-  strokeWidth?: number | string
+  strokeWidth?: number | string;
-  absoluteStrokeWidth?: boolean
+  absoluteStrokeWidth?: boolean;
 }
 
-
+export type IconNode = [elementName: string, attrs: Record<string, string>][];
-export type IconNode = [elementName: string, attrs: Record<string, string>][]
+export type Icon = FunctionalComponent<SVGProps>;
-export type Icon = FunctionalComponent<SVGProps>
 /**
  * Converts string to KebabCase
  * Copied from scripts/helper. If anyone knows how to properly import it here
@@ -20,29 +19,31 @@ export type Icon = FunctionalComponent<SVGProps>
  * @param {string} string
  * @returns {string} A kebabized string
  */
-export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+export const toKebabCase = (string: string) =>
+  string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
-const createLucideIcon = (iconName: string, iconNode: IconNode): Icon => (
+const createLucideIcon =
-  { size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
+  (iconName: string, iconNode: IconNode): Icon =>
-  { attrs, slots } // context
+  (
+    { size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
+    { attrs, slots }, // context
   ) => {
-  return h(
+    return h(
-    'svg',
+      'svg',
-    {
+      {
-      ...defaultAttributes,
+        ...defaultAttributes,
-      width: size || defaultAttributes.width,
+        width: size || defaultAttributes.width,
-      height: size || defaultAttributes.height,
+        height: size || defaultAttributes.height,
-      stroke: color || defaultAttributes.stroke,
+        stroke: color || defaultAttributes.stroke,
-      'stroke-width': absoluteStrokeWidth ?  Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        'stroke-width': absoluteStrokeWidth
-      ...attrs,
+          ? (Number(strokeWidth) * 24) / Number(size)
-      class: ['lucide', `lucide-${toKebabCase(iconName)}`],
+          : strokeWidth,
-      ...props,
+        ...attrs,
-    },
+        class: ['lucide', `lucide-${toKebabCase(iconName)}`],
-    [
+        ...props,
-      ...iconNode.map(child => h(...child)),
+      },
-      ...(slots.default ? [slots.default()] : [])
+      [...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])],
-    ],
+    );
-  );
+  };
-};
 
 export default createLucideIcon;

packages/lucide-vue/nuxt.js

@@ -1,11 +0,0 @@
-import { join } from 'path';
-
-export default function LucideNuxtPlugin() {
-  this.nuxt.hook('components:dirs', (dirs) => {
-    dirs.push({
-      path: join(__dirname, 'dist', 'esm', 'icons'),
-      prefix: 'Icon',
-      ignore: ['**/index.js'],
-    });
-  });
-}

packages/lucide-vue/scripts/exportTemplate.mjs

@@ -1,26 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
-
-export default ({ componentName, iconName, children, getSvg, deprecated }) => {
-  const svgContents = getSvg();
-  const svgBase64 = base64SVG(svgContents);
-
-  return `
-import createLucideIcon from '../createLucideIcon';
-
-/**
- * @component @name ${componentName}
- * @description Lucide SVG icon component, renders SVG Element with children.
- *
- * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
- * @see https://lucide.dev/guide/packages/lucide-vue - Documentation
- *
- * @param {Object} props - Lucide icons props and any valid SVG attribute
- * @returns {Component} Vue Component
- * ${deprecated ? '@deprecated' : ''}
- */
-const ${componentName} = createLucideIcon('${componentName}Icon', ${JSON.stringify(children)});
-
-export default ${componentName};
-`;
-};

packages/lucide-vue/src/createLucideIcon.ts

@@ -1,84 +0,0 @@
-import { Component } from 'vue';
-import { Vue, VueConfiguration } from 'vue/types/vue';
-import defaultAttributes from './defaultAttributes';
-
-var showDeprecationWarning = true;
-
-type IconNode = [elementName: string, attrs: Record<string, string>][]
-
-/**
- * Converts string to KebabCase
- * Copied from scripts/helper. If anyone knows how to properly import it here
- * then please fix it.
- *
- * @param {string} string
- * @returns {string} A kebabized string
- */
-export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
-export default (iconName: string, iconNode: IconNode): Component => ({
-  name: iconName,
-  functional: true,
-  props: {
-    color: {
-      type: String,
-      default: 'currentColor',
-    },
-    size: {
-      type: Number,
-      default: 24,
-    },
-    strokeWidth: {
-      type: Number,
-      default: 2,
-    },
-    absoluteStrokeWidth: {
-      type: Boolean,
-      default: false,
-    },
-    defaultClass: {
-      type: String,
-      default: `lucide-icon lucide lucide-${toKebabCase(iconName).replace('-icon', '')}`,
-    },
-  },
-  render(
-    createElement,
-    {
-      props: { color, size, strokeWidth, absoluteStrokeWidth, defaultClass },
-      data,
-      children = [],
-    },
-  ) {
-    if (showDeprecationWarning) {
-      console.warn(
-        '[Lucide Vue] This package will be deprecated end of 2023. Please upgrade to Vue 3 and use the latest lucide package for Vue.',
-      );
-      showDeprecationWarning = false;
-    }
-
-    return createElement(
-      'svg',
-      {
-        // prettier-ignore
-        class: [defaultClass, data.class, data.staticClass, data.attrs && data.attrs.class].filter(Boolean),
-        style: [data.style, data.staticStyle, data.attrs && data.attrs.style].filter(Boolean),
-        attrs: {
-          ...defaultAttributes,
-          width: size,
-          height: size,
-          stroke: color,
-          'stroke-width':
-            absoluteStrokeWidth
-              ? Number(strokeWidth) * 24 / Number(size)
-              : strokeWidth,
-          ...data.attrs,
-        },
-        on: data?.on || {}
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => createElement(String(tag), { attrs })),
-        ...children
-      ],
-    );
-  },
-});

packages/lucide-vue/src/defaultAttributes.ts

@@ -1,13 +0,0 @@
-const defaultAttributes = {
-  xmlns: 'http://www.w3.org/2000/svg',
-  width: 24,
-  height: 24,
-  viewBox: '0 0 24 24',
-  fill: 'none',
-  stroke: 'currentColor',
-  'stroke-width': 2,
-  'stroke-linecap': 'round',
-  'stroke-linejoin': 'round',
-};
-
-export default defaultAttributes

packages/lucide-vue/src/icons/.gitkeep

@@ -1 +0,0 @@
-Folder for generated icons

packages/lucide-vue/src/lucide-vue.ts

@@ -1,3 +0,0 @@
-export * from './icons';
-export * as icons from './icons';
-export * from './aliases';

packages/lucide-vue/tests/__snapshots__/lucide-vue.spec.ts.snap

@@ -1,215 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Using lucide icon components > should add a class to the element 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile my-icon"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Using lucide icon components > should add a style attribute to the element 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    style="position: absolute"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile"
-    fill="none"
-    height="48"
-    stroke="red"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="4"
-    viewBox="0 0 24 24"
-    width="48"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Using lucide icon components > should pass children to the icon slot 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-    <text>
-      Hello World
-    </text>
-  </svg>
-</div>
-`;
-
-exports[`Using lucide icon components > should render an component 1`] = `
-<div>
-  <svg
-    class="lucide-icon lucide lucide-smile"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="12"
-      cy="12"
-      key="1mglay"
-      r="10"
-    />
-    <path
-      d="M8 14s1.5 2 4 2 4-2 4-2"
-      key="1y1vjs"
-    />
-    <line
-      key="yxxnd0"
-      x1="9"
-      x2="9.01"
-      y1="9"
-      y2="9"
-    />
-    <line
-      key="1p4y9e"
-      x1="15"
-      x2="15.01"
-      y1="9"
-      y2="9"
-    />
-  </svg>
-</div>
-`;

packages/lucide-vue/tests/lucide-vue.spec.ts

@@ -1,133 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent, cleanup } from '@testing-library/vue'
-import { Smile, Pen, Edit2 } from '../src/lucide-vue'
-import { afterEach } from 'vitest';
-import { VueClass } from '@vue/test-utils';
-
-describe('Using lucide icon components', () => {
-  afterEach(() => cleanup())
-
-  it('should render an component', () => {
-    const {container} = render(Smile as VueClass<any>)
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should adjust the size, stroke color and stroke width', () => {
-    const {container} = render(Smile as VueClass<any>, {
-      props: {
-        size: 48,
-        color: 'red',
-        strokeWidth: 4
-      }
-    })
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    expect(icon.getAttribute('width')).toBe('48')
-    expect(icon.getAttribute('stroke')).toBe('red')
-    expect(icon.getAttribute('stroke-width')).toBe('4')
-
-    expect(container).toMatchSnapshot();
-  });
-
-
-  it('should add a class to the element', () => {
-    const {container} = render(Smile as VueClass<any>, {
-      attrs: {
-        class: "my-icon"
-      }
-    })
-
-    expect(container).toMatchSnapshot();
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    expect(icon).toHaveClass('my-icon')
-    expect(icon).toHaveClass('lucide-smile')
-    expect(icon).toHaveClass('lucide')
-  });
-
-  it('should add a style attribute to the element', () => {
-    const {container} = render(Smile as VueClass<any>, {
-      attrs: {
-        style: 'position: absolute',
-      }
-    })
-
-    expect(container).toMatchSnapshot();
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    expect(icon).toHaveStyle({ position: 'absolute' })
-  });
-
-  it('should call the onClick event', async () => {
-    const onClick = vi.fn()
-    render(Smile  as VueClass<any>, {
-      listeners: {
-        click: onClick
-      }
-    })
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    await fireEvent.click(icon)
-
-    expect(onClick).toHaveBeenCalled()
-  });
-
-  it('should pass children to the icon slot', () => {
-    const testText = 'Hello World'
-    const template = `<text>${testText}</text>`
-    const { getByText, container } = render(Smile as VueClass<any>, {
-      slots: {
-        default: { template }
-      }
-    })
-
-    const textElement = getByText(testText)
-
-    expect(textElement).toBeInTheDocument()
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render the alias icon', () => {
-    const { getByText, container } = render(Pen as VueClass<any>, {
-      props: {
-        size: '48',
-        color: 'red',
-        strokeWidth: '4'
-      }
-    })
-
-    const PenIconRenderedHTML = container.innerHTML
-
-    cleanup()
-
-    const { container: Edit2Container } = render(Edit2 as VueClass<any>, {
-      props: {
-        size: '48',
-        color: 'red',
-        strokeWidth: '4'
-      }
-    })
-
-    expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
-  })
-
-  it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
-    const { getByText, container } = render(Pen as VueClass<any>, {
-      props: {
-        size: '48',
-        color: 'red',
-        absoluteStrokeWidth: true
-      }
-    })
-
-    const [icon] = document.getElementsByClassName('lucide');
-
-    expect(icon.getAttribute('width')).toBe('48')
-    expect(icon.getAttribute('stroke')).toBe('red')
-    expect(icon.getAttribute('stroke-width')).toBe('1')
-  })
-});

packages/lucide-vue/tests/setupVitest.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

packages/vue/README.md

@@ -1,21 +1,19 @@
 # Lucide Vue
 
-Implementation of the lucide icon library for Vue applications.
+Implementation of the lucide icon library for Vue 3 applications.
 
 > What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
 
-> :warning: This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next)
-
 ## Installation
 
 ```sh
-yarn add lucide-vue
+yarn add @lucide/vue
 ```
 
 or
 
 ```sh
-npm install lucide-vue
+npm install @lucide/vue
 ```
 
 ## How to use
@@ -34,7 +32,7 @@ You can pass additional props to adjust the icon.
 
 <script>
 // Returns Vue component
-import { Camera } from 'lucide-vue';
+import { Camera } from '@lucide/vue';
 
 export default {
   name: 'My Component',
@@ -77,7 +75,7 @@ It is possible to create one generic icon component to load icons.
 </template>
 
 <script>
-import * as icons from 'lucide-vue';
+import * as icons from '@lucide/vue';
 
 export default {
   props: {
@@ -104,25 +102,3 @@ export default {
   </div>
 </template>
 ```
-
-## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
-
-### Setup
-
-In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
-
-```js
-export default {
-  buildModules: ['lucide-vue/nuxt']
-};
-```
-
-### How to use
-
-Icon components are prefixed with `Icon`. Use icon components without importing them.
-
-### Example
-
-```html
-<IconCamera color="red" :size="32" />
-```

packages/vue/package.json

@@ -1,15 +1,15 @@
 {
-  "name": "lucide-vue",
+  "name": "@lucide/vue",
   "version": "0.0.1",
   "author": "Eric Fennis",
-  "description": "A Lucide icon library package for Vue 2 applications",
+  "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
   "repository": {
     "type": "git",
     "url": "https://github.com/lucide-icons/lucide.git",
-    "directory": "packages/lucide-vue"
+    "directory": "packages/vue"
   },
   "keywords": [
     "Lucide",
@@ -22,12 +22,13 @@
     "Fontawesome",
     "Font Awesome"
   ],
-  "amdName": "lucide-vue",
+  "amdName": "lucide-vue-next",
-  "source": "build/lucide-vue.js",
+  "source": "build/lucide-vue-next.js",
-  "main": "dist/cjs/lucide-vue.js",
+  "main": "dist/cjs/lucide-vue-next.js",
-  "main:umd": "dist/umd/lucide-vue.js",
+  "main:umd": "dist/umd/lucide-vue-next.js",
-  "module": "dist/esm/lucide-vue.js",
+  "module": "dist/esm/lucide-vue-next.js",
-  "unpkg": "dist/umd/lucide-vue.min.js",
+  "unpkg": "dist/umd/lucide-vue-next.min.js",
+  "typings": "dist/lucide-vue-next.d.ts",
   "sideEffects": false,
   "files": [
     "dist",
@@ -36,7 +37,7 @@
   "scripts": {
     "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
     "copy:license": "cp ../../LICENSE ./LICENSE",
-    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
+    "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "vitest run",
@@ -45,18 +46,17 @@
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
     "@lucide/rollup-plugins": "workspace:*",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/vue": "^5.9.0",
+    "@testing-library/vue": "^8.0.1",
-    "@vitejs/plugin-vue2": "2.2.0",
+    "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/test-utils": "1.3.0",
+    "@vue/test-utils": "2.4.3",
-    "rollup": "^3.23.0",
+    "rollup": "^4.9.2",
-    "typescript": "^4.9.5",
+    "rollup-plugin-dts": "^6.1.0",
     "vite": "5.0.12",
-    "vitest": "^0.32.2",
+    "vitest": "^1.1.1",
-    "vue": "2.7.14",
+    "vue": "^3.0.1"
-    "vue-template-compiler": "2.7.14"
   },
   "peerDependencies": {
-    "vue": "^2.6.12"
+    "vue": ">=3.0.1"
   }
 }

packages/vue/rollup.config.mjs

@@ -1,5 +1,6 @@
 import plugins, { replace } from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: 'json' };
+import dts from "rollup-plugin-dts";
 
 const packageName = 'LucideVue';
 const outputFileName = 'lucide-vue';
@@ -56,4 +57,19 @@ const configs = bundles
   )
   .flat();
 
-export default configs;
+  export default [
+    {
+      input: inputs[0],
+      output: [{
+        file: `dist/${outputFileName}.d.ts`, format: "es"
+      }],
+      plugins: [
+        dts({
+          compilerOptions: {
+            preserveSymlinks: false
+          }
+        })
+      ],
+    },
+    ...configs
+  ];

packages/vue/scripts

@@ -0,0 +1 @@
+../lucide-vue-next/scripts

packages/vue/src

@@ -0,0 +1 @@
+../lucide-vue-next/src

packages/vue/tests

@@ -0,0 +1 @@
+../lucide-vue-next/tests

packages/vue/tsconfig.json

@@ -11,7 +11,6 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
-    "noEmit": true
+    "noEmit": true,
-  },
+  }
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 }

packages/vue/vitest.config.mts

@@ -1,19 +1,11 @@
 import { defineConfig } from 'vitest/config'
-import vue from '@vitejs/plugin-vue2'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   plugins: [vue()],
   test: {
     globals: true,
     environment: 'jsdom',
-    transformMode: {
-      web: [/\.jsx?$/],
-    },
     setupFiles: './tests/setupVitest.js',
-    threads: false,
-    isolate: false,
-  },
-  resolve: {
-    conditions: ['development', 'browser'],
   },
 });