Add event listeners to vue component, fix #400

Update figma plugin
revert disable workflow
2025-12-23 12:09:25 +01:00 · 2021-09-20 08:33:32 +02:00 · 2021-09-20 08:32:57 +02:00 · 2021-09-17 17:50:07 +02:00 · 2021-09-17 17:26:54 +02:00 · 2021-09-17 17:03:02 +02:00
14 changed files with 89 additions and 29 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -5,9 +5,15 @@ on:
    tags:
    - 'v*'

+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version'
+        required: true
+
 jobs:
  pre-build:
-    if: github.repository == 'lucide-icons/lucide'
+    if: github.repository == 'lucide-icons/lucide' && contains('["locness3","ericfennis", "johnletey"]', github.actor)
    runs-on: ubuntu-latest
    outputs:
      VERSION: ${{ steps.get_version.outputs.VERSION }}
@@ -27,7 +33,7 @@ jobs:
    needs: pre-build
    steps:
      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
        with:
          node-version: '14'
          cache: 'yarn'
@@ -62,7 +68,7 @@ jobs:
    needs: pre-build
    steps:
      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
        with:
          node-version: '14'
          cache: 'yarn'
@@ -97,7 +103,7 @@ jobs:
    needs: pre-build
    steps:
      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
        with:
          node-version: '14'
          cache: 'yarn'
@@ -132,7 +138,7 @@ jobs:
    needs: pre-build
    steps:
      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
        with:
          node-version: '14'
          cache: 'yarn'
@@ -167,7 +173,7 @@ jobs:
    needs: pre-build
    steps:
      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
        with:
          node-version: '14'
          cache: 'yarn'
@@ -202,7 +208,7 @@ jobs:
    needs: pre-build
    steps:
      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
        with:
          node-version: '14'
          cache: 'yarn'
@@ -237,7 +243,7 @@ jobs:
    needs: pre-build
    steps:
      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
        with:
          node-version: '14'
          cache: 'yarn'
@@ -304,7 +310,7 @@ jobs:
    runs-on: ubuntu-latest
    needs: [pre-build, lucide-font]
    container:
-      image:  google/dart:latest
+      image:  cirrusci/flutter:latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/download-artifact@v2
@@ -330,9 +336,12 @@ jobs:
          EOF

      - name: Get packages
-        run: pub get
+        run: flutter pub get
        working-directory: packages/lucide-flutter

+      - name: Move the ttf file
+        run: ls -al
+
      - name: Move the ttf file
        run: mv lucide-font/lucide.ttf packages/lucide-flutter/assets/Lucide.ttf

@@ -345,7 +354,7 @@ jobs:
        working-directory: packages/lucide-flutter

      - name: Flutter publish
-        run: pub publish -f
+        run: flutter pub publish -f
        working-directory: packages/lucide-flutter

      - name: Upload pubspec.yaml
--- a/packages/lucide-figma/manifest.json
+++ b/packages/lucide-figma/manifest.json
@@ -3,5 +3,6 @@
  "id": "939567362549682242",
  "api": "1.0.0",
  "ui": "build/ui.html",
-  "main": "build/main.js"
+  "main": "build/main.js",
+  "editorType": ["figma"]
 }
--- a/packages/lucide-preact/src/createPreactComponent.js
+++ b/packages/lucide-preact/src/createPreactComponent.js
@@ -1,6 +1,16 @@
 import { h } from 'preact';
 import defaultAttributes from './defaultAttributes';

+/**
+ * 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.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 export default (iconName, iconNode) => {
  const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }) =>
    h(
@@ -11,6 +21,7 @@ export default (iconName, iconNode) => {
        height: size,
        stroke: color,
        'stroke-width': strokeWidth,
+        class: `lucide lucide-${toKebabCase(iconName)}`,
        ...rest,
      },
      iconNode.map(([tag, attrs]) => h(tag, attrs)),
--- a/packages/lucide-preact/tests/snapshots/lucide-preact.spec.js.snap
+++ b/packages/lucide-preact/tests/snapshots/lucide-preact.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

-exports[`Using lucide icon components should render an component 1`] = `"<svg 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\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should render an component 1`] = `"<svg 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\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
--- a/packages/lucide-react/src/createReactComponent.js
+++ b/packages/lucide-react/src/createReactComponent.js
@@ -2,6 +2,16 @@ import { forwardRef, createElement } from 'react';
 import PropTypes from 'prop-types';
 import defaultAttributes from './defaultAttributes';

+/**
+ * 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.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 export default (iconName, iconNode) => {
  const Component = forwardRef(
    ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }, ref) =>
@@ -14,6 +24,7 @@ export default (iconName, iconNode) => {
          height: size,
          stroke: color,
          strokeWidth,
+          className: `lucide lucide-${toKebabCase(iconName)}`,
          ...rest,
        },
        iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
--- a/packages/lucide-react/tests/snapshots/lucide-react.spec.js.snap
+++ b/packages/lucide-react/tests/snapshots/lucide-react.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

-exports[`Using lucide icon components should render an component 1`] = `"<svg 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\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should render an component 1`] = `"<svg 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\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
--- a/packages/lucide-vue-next/src/createVueComponent.js
+++ b/packages/lucide-vue-next/src/createVueComponent.js
@@ -1,15 +1,24 @@
 import { h } from 'vue';
 import defaultAttributes from './defaultAttributes';

+/**
+ * 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.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 const createVueComponent = (iconName, iconNode) => (props, context) =>
  h(
    'svg',
    {
      ...defaultAttributes,
-      ...{
-        width: props.size || defaultAttributes.width,
-        height: props.size || defaultAttributes.height,
-      },
+      width: props.size || defaultAttributes.width,
+      height: props.size || defaultAttributes.height,
+      class: ['lucide', `lucide-${toKebabCase(iconName)}`],
      ...context.attrs,
      ...props,
    },
--- a/packages/lucide-vue-next/tests/snapshots/lucide-vue-next.spec.js.snap
+++ b/packages/lucide-vue-next/tests/snapshots/lucide-vue-next.spec.js.snap
@@ -160,6 +160,7 @@ VueWrapper {
      data-v-app=""
    >
      <svg
+        class="lucide lucide-smile-icon"
        fill="none"
        height="24"
        stroke="currentColor"
@@ -253,6 +254,7 @@ VueWrapper {
  },
  "rootVM": Object {},
  "wrapperElement": <svg
+    class="lucide lucide-smile-icon"
    fill="none"
    height="24"
    stroke="currentColor"
@@ -304,6 +306,7 @@ VueWrapper {
      data-v-app=""
    >
      <svg
+        class="lucide lucide-smile-icon"
        fill="none"
        height="48"
        size="48"
@@ -398,6 +401,7 @@ VueWrapper {
  },
  "rootVM": Object {},
  "wrapperElement": <svg
+    class="lucide lucide-smile-icon"
    fill="none"
    height="48"
    size="48"
@@ -450,6 +454,7 @@ VueWrapper {
      data-v-app=""
    >
      <svg
+        class="lucide lucide-smile-icon"
        fill="none"
        height="24"
        stroke="currentColor"
@@ -542,6 +547,7 @@ VueWrapper {
  },
  "rootVM": Object {},
  "wrapperElement": <svg
+    class="lucide lucide-smile-icon"
    fill="none"
    height="24"
    stroke="currentColor"
--- a/packages/lucide-vue/src/createVueComponent.js
+++ b/packages/lucide-vue/src/createVueComponent.js
@@ -52,6 +52,7 @@ export default (iconName, iconNode) => ({
          'stroke-width': strokeWidth,
          ...data.attrs,
        },
+        on: data?.on || {}
      },
      iconNode.map(([tag, attrs]) => createElement(tag, { attrs })),
    );
--- a/packages/lucide-vue/tests/lucide-vue.spec.js
+++ b/packages/lucide-vue/tests/lucide-vue.spec.js
@@ -41,4 +41,16 @@ describe('Using lucide icon components', () => {
    expect(wrapper).toMatchSnapshot();
    expect(wrapper.attributes('style')).toContain('position: absolute')
  });
+
+  it('should call the onClick event', () => {
+    const onClick = jest.fn()
+    const wrapper = mount(Smile, {
+      listeners: {
+        click: onClick
+      }
+    })
+
+    wrapper.trigger('click')
+    expect(onClick).toHaveBeenCalled()
+  });
 });
--- a/packages/lucide/src/replaceElement.js
+++ b/packages/lucide/src/replaceElement.js
@@ -73,7 +73,7 @@ export default (element, { nameAttr, icons, attrs }) => {
    ...attrs,
  };

-  const classNames = combineClassNames(['lucide', elementAttrs, attrs]);
+  const classNames = combineClassNames(['lucide', `lucide-${iconName}`, elementAttrs, attrs]);

  if (classNames) {
    iconAttrs.class = classNames;
--- a/packages/lucide/tests/snapshots/lucide.spec.js.snap
+++ b/packages/lucide/tests/snapshots/lucide.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`createIcons should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" icon-name=\\"volume-2\\" class=\\"lucide icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
+exports[`createIcons should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" icon-name=\\"volume-2\\" class=\\"lucide lucide-volume-2 icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;

-exports[`createIcons should read elements from DOM and replace it with icons 1`] = `"<svg 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\\" icon-name=\\"volume-2\\" class=\\"lucide\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
+exports[`createIcons should read elements from DOM and replace it with icons 1`] = `"<svg 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\\" icon-name=\\"volume-2\\" class=\\"lucide lucide-volume-2\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
--- a/packages/lucide/tests/lucide.spec.js
+++ b/packages/lucide/tests/lucide.spec.js
@@ -11,7 +11,7 @@ const getOriginalSvg = (iconName) => {
  const svgParsed = parseSync(svgContent);

  svgParsed.attributes['icon-name'] = iconName;
-  svgParsed.attributes['class'] = 'lucide';
+  svgParsed.attributes['class'] = `lucide lucide-${iconName}`;

  return stringify(svgParsed, { selfClose: false });
 };
@@ -45,7 +45,7 @@ describe('createIcons', () => {
    document.body.innerHTML = `<i icon-name="volume-2" class="lucide"></i>`;

    const attrs = {
-      class: 'lucide icon custom-class',
+      class: 'lucide lucide-volume-2 icon custom-class',
      fill: 'black',
    };

--- a/scripts/outlineSvg.js
+++ b/scripts/outlineSvg.js
@@ -8,11 +8,11 @@ import { parse, stringify } from 'svgson'; // eslint-disable-line import/no-extr

 const inputDir = `./icons/`;
 const outputDirs = {
-  converted_icons_200: '1',
-  converted_icons_300: '1.5',
+  'converted_icons-200': '1',
+  'converted_icons-300': '1.5',
  converted_icons: '2',
-  converted_icons_500: '2.5',
-  converted_icons_600: '3',
+  'converted_icons-500': '2.5',
+  'converted_icons-600': '3',
 };

 function transformForward(node) {
Author	SHA1	Message	Date
Eric Fennis	06fe7d6a3f	Add event listeners to vue component, fix #400	2021-09-20 08:33:32 +02:00
Eric Fennis	81ff3fc1d1	Update figma plugin	2021-09-20 08:32:57 +02:00
Eric Fennis	776ef4f43c	revert disable workflow	2021-09-17 17:50:07 +02:00
Eric Fennis	e4edabddb9	add other docker image	2021-09-17 17:26:54 +02:00
Eric Fennis	028afec837	Temporary disable CI for packages	2021-09-17 17:03:02 +02:00
Eric Fennis	049c4cd61e	Fix directory names	2021-09-17 16:58:47 +02:00
Eric Fennis	b13a7bf1ab	Add custom build again	2021-09-17 16:44:25 +02:00
Eric Fennis	e278f27a61	fix versions	2021-09-17 16:33:23 +02:00
Eric Fennis	f70a0e1945	Add default classnames, fix #317	2021-09-17 16:23:17 +02:00