fix icon

* #317 Add icon-names to class list for Vue.

* #317 Tidy up class name.

.github/workflows/release.yml

@@ -11,7 +11,6 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       VERSION: ${{ steps.get_version.outputs.VERSION }}
-      YARN_CACHE_DIR: ${{ steps.yarn_cache.outputs.YARN_CACHE_DIR }}
 
     steps:
       - name: Get the version
@@ -22,21 +21,16 @@ jobs:
         env:
           VERSION_REF: ${{ github.event.inputs.version || github.ref }}
 
-      - name: Get yarn cache directory path
-        id: yarn_cache
-        run: echo "::set-output name=YARN_CACHE_DIR::$(yarn cache dir)"
-
   lucide:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4
         with:
           node-version: '14'
           cache: 'yarn'
-          cache-dependency-path: yarn.lock
 
       - name: Install dependencies
         run: yarn
@@ -68,11 +62,10 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4
         with:
           node-version: '14'
           cache: 'yarn'
-          cache-dependency-path: yarn.lock
 
       - name: Install dependencies
         run: yarn
@@ -104,11 +97,10 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4
         with:
           node-version: '14'
           cache: 'yarn'
-          cache-dependency-path: yarn.lock
 
       - name: Install dependencies
         run: yarn
@@ -140,11 +132,10 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4
         with:
           node-version: '14'
           cache: 'yarn'
-          cache-dependency-path: yarn.lock
 
       - name: Install dependencies
         run: yarn
@@ -176,11 +167,10 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4
         with:
           node-version: '14'
           cache: 'yarn'
-          cache-dependency-path: yarn.lock
 
       - name: Install dependencies
         run: yarn --pure-lockfile
@@ -212,11 +202,10 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4
         with:
           node-version: '14'
           cache: 'yarn'
-          cache-dependency-path: yarn.lock
 
       - name: Install dependencies
         run: yarn
@@ -248,11 +237,10 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4
         with:
           node-version: '14'
           cache: 'yarn'
-          cache-dependency-path: yarn.lock
 
       - name: Update repos
         run: sudo apt-get update
@@ -287,15 +275,24 @@ jobs:
       - name: "Outline SVG"
         run: yarn build:outline-icons
 
-      - name: Build 'Lucide'
+      - name: Build Icon Font
         run: |
             mkdir build
-            list=(_200 _300 "" _500 _600)
+            list=(-200 -300 "" -500 -600)
+            command=''
             for name in "${list[@]}"
             do
-              fontcustom compile "./converted_icons${name}" -h -n "Lucide${name}" -o ./tmp -F && mv ./tmp/* build
+              if [ -z "$command" ]
+                subcommand="(fontcustom compile "./converted_icons${name}" -h -n "lucide${name}" -o ./tmp -F && mv ./tmp/* build)"
+                then
+                  command="$subcommand";
+                else
+                  command="$command & $subcommand";
+              fi
             done
 
+            eval $command
+
       - name: 'Upload to Artifacts'
         uses: actions/upload-artifact@v1
         with:
@@ -332,11 +329,15 @@ jobs:
           }
           EOF
 
+      - name: Get packages
+        run: pub get
+        working-directory: packages/lucide-flutter
+
       - name: Move the ttf file
-        run: mv lucide-font/Lucide.ttf assets/Lucide.ttf
+        run: mv lucide-font/lucide.ttf packages/lucide-flutter/assets/Lucide.ttf
 
       - name: Generate exports file
-        run: dart tool/generate_fonts.dart lucide-font/Lucide-preview.html
+        run: dart tool/generate_fonts.dart lucide-font/lucide-preview.html
         working-directory: packages/lucide-flutter
 
       - name: Update yaml

README.md

@@ -17,7 +17,7 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
 
 ### Why choose Lucide over Feather Icons
 
-- Lucide already expended the icon set by 130+ in less then a year, so more icons to work with.
+- Lucide already expanded the icon set by 130+ in less then a year, so more icons to work with.
 - Well maintained code base.
 - Active community.
 

icons/battery-charging.svg

@@ -9,7 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 7H3.78A1.73 1.73 0 002 8.67v6.66A1.73 1.73 0 003.78 17H6m8-10h2.22A1.73 1.73 0 0118 8.67v6.66A1.73 1.73 0 0116.22 17H13" />
+  <path d="M14 7h2a2 2 0 012 2v6a2 2 0 01-2 2h-3" />
+  <path d="M7 7H4a2 2 0 00-2 2v6a2 2 0 002 2h2" />
   <polyline points="11 7 8 12 12 12 9 17" />
   <line x1="22" x2="22" y1="11" y2="13" />
 </svg>

icons/quote.svg

@@ -0,0 +1,14 @@
+<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"
+>
+  <path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" />
+  <path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" />
+</svg>

icons/twitter.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5 0-.28-.03-.56-.08-.83A7.72 7.72 0 0023 3z" />
 </svg>

packages/lucide-preact/package.json

@@ -19,7 +19,7 @@
   "typings": "dist/lucide-preact.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-preact/src --templateSrc=../packages/lucide-preact/scripts/exportTemplate --renderUniqueKey",
     "build:es": "babel src -d dist/esm",

packages/lucide-react/package.json

@@ -19,7 +19,7 @@
   "typings": "dist/lucide-react.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-react/src --templateSrc=../packages/lucide-react/scripts/exportTemplate --renderUniqueKey",
     "build:es": "babel src -d dist/esm",

packages/lucide-vue-next/package.json

@@ -20,9 +20,9 @@
   "typings": "dist/lucide-vue-next.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.js",
-    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-vue-next/src --templateSrc=../packages/lucide-vue-next/scripts/exportTemplate",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-vue-next/src --templateSrc=../packages/lucide-vue-next/scripts/exportTemplate  --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
     "build:types": "yarn --cwd ../../ babel-node packages/lucide-vue-next/scripts/buildTypes.js",
     "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-vue-next/rollup.config.js",

packages/lucide-vue/babel.config.js

@@ -1,12 +1,14 @@
+const mainConfig = require('../../babel.config');
+
 module.exports = {
   presets: [
     [
-      '@babel/preset-env',
+      '@babel/env',
       {
-        targets: {
-          node: 'current',
-        },
+        loose: true,
+        modules: false,
       },
     ],
   ],
+  env: mainConfig.env,
 };

packages/lucide-vue/nuxt.js

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

packages/lucide-vue/package.json

@@ -19,7 +19,7 @@
   "unpkg": "dist/umd/lucide-vue.min.js",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-vue/src --templateSrc=../packages/lucide-vue/scripts/exportTemplate",
     "build:es": "babel src -d dist/esm",

packages/lucide-vue/src/createVueComponent.js

@@ -1,5 +1,15 @@
 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) => ({
   name: iconName,
   functional: true,
@@ -18,7 +28,7 @@ export default (iconName, iconNode) => ({
     },
     defaultClass: {
       type: String,
-      default: 'lucide-icon',
+      default: `lucide-icon lucide lucide-${toKebabCase(iconName).replace('-icon', '')}`,
     },
   },
   render(

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Using lucide icon components should add a class to the element 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-icon my-icon">
+<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-icon lucide lucide-smile my-icon">
   <circle cx="12" cy="12" r="10"></circle>
   <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
   <line x1="9" y1="9" x2="9.01" y2="9"></line>
@@ -10,7 +10,7 @@ exports[`Using lucide icon components should add a class to the element 1`] = `
 `;
 
 exports[`Using lucide icon components should add a style attribute to the element 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" style="position: absolute" class="lucide-icon">
+<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" style="position: absolute" class="lucide-icon lucide lucide-smile">
   <circle cx="12" cy="12" r="10"></circle>
   <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
   <line x1="9" y1="9" x2="9.01" y2="9"></line>
@@ -19,7 +19,7 @@ exports[`Using lucide icon components should add a style attribute to the elemen
 `;
 
 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-icon">
+<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-icon lucide lucide-smile">
   <circle cx="12" cy="12" r="10"></circle>
   <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
   <line x1="9" y1="9" x2="9.01" y2="9"></line>
@@ -28,7 +28,7 @@ exports[`Using lucide icon components should adjust the size, stroke color and s
 `;
 
 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-icon">
+<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-icon lucide lucide-smile">
   <circle cx="12" cy="12" r="10"></circle>
   <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
   <line x1="9" y1="9" x2="9.01" y2="9"></line>

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

@@ -28,7 +28,7 @@ describe('Using lucide icon components', () => {
     })
 
     expect(wrapper).toMatchSnapshot();
-    expect(String(wrapper.classes())).toBe(String(['lucide-icon', 'my-icon']))
+    expect(String(wrapper.classes())).toBe(String(['lucide-icon','lucide','lucide-smile', 'my-icon']))
   });
 
   it('should add a style attribute to the element', () => {
@@ -36,7 +36,6 @@ describe('Using lucide icon components', () => {
       attrs: {
         style: 'position: absolute',
       }
-
     })
 
     expect(wrapper).toMatchSnapshot();

packages/lucide/package.json

@@ -19,7 +19,7 @@
   "typings": "dist/lucide.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide/src",
     "build:es": "babel src -d dist/esm",

scripts/build/generateIconFiles.js

@@ -2,6 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import prettier from 'prettier';
+import { promises } from 'stream';
 import { toPascalCase } from '../helpers';
 
 export default function({ iconNodes, outputDirectory, template, showLog = true, iconFileExtention = '.js' }) {
@@ -12,7 +13,7 @@ export default function({ iconNodes, outputDirectory, template, showLog = true,
     fs.mkdirSync(iconsDistDirectory);
   }
 
-  icons.forEach(iconName => {
+  const writeIconFiles = icons.map(async iconName => {
     const location = path.join(iconsDistDirectory, `${iconName}${iconFileExtention}`);
     const componentName = toPascalCase(iconName);
 
@@ -21,11 +22,16 @@ export default function({ iconNodes, outputDirectory, template, showLog = true,
 
     const elementTemplate = template({ componentName, iconName, children });
 
-
-    fs.writeFileSync(location, prettier.format(elementTemplate, { singleQuote: true, trailingComma: 'all', parser: 'babel' }), 'utf-8');
-
-    if(showLog) {
-      console.log('Successfully built', componentName);
-    }
+    await fs.promises.writeFile(location, prettier.format(elementTemplate, { singleQuote: true, trailingComma: 'all', parser: 'babel' }), 'utf-8');
   });
+
+  Promise.all(writeIconFiles)
+  .then(() => {
+    if(showLog) {
+      console.log('Successfully built', icons.length, 'icons.');
+    }
+  })
+  .catch((error) => {
+    throw new Error(`Something went wrong generating icon files,\n ${error}`)
+  })
 }

tags.json

@@ -1438,6 +1438,9 @@
     "office",
     "device"
   ],
+  "quote": [
+    "quotation"
+  ],
   "qr-code": [
     "barcode"
   ],