Linting SVG files (#1642)

* eslint rules for SVGS

* apply options

* Add typescript eslinter

* Make eslint work with the codebase

* Format icons

* Test svg

* Add workflow

* Fix lint command

* Revert duplicated aliases

* Update .eslintrc.js

Co-authored-by: Jakob Guddas <github@jguddas.de>

* Update .eslintrc.js

Co-authored-by: Jakob Guddas <github@jguddas.de>

* Move linter to separate workflow

* Add pnpm install

* Revert icon changes

* Test eslint workflow

* turn of fail lint-contributors

* Revert theater

* process feedback

---------

Co-authored-by: Jakob Guddas <github@jguddas.de>

.eslintignore

@@ -4,3 +4,7 @@ coverage
 lib
 tests
 node_modules
+.eslintrc.js
+docs/images
+docs/guide/basics/examples
+packages/lucide-react/dynamicIconImports.js

.eslintrc.js

@@ -1,10 +1,13 @@
+const DEFAULT_ATTRS = require('./scripts/render/default-attrs.json');
+
 module.exports = {
+  root: true,
   env: {
     browser: true,
     node: true,
   },
   extends: ['airbnb-base', 'prettier'],
-  plugins: ['import', 'prettier'],
+  plugins: ['import', 'prettier', '@html-eslint'],
   rules: {
     'no-console': 'off',
     'no-param-reassign': 'off',
@@ -15,6 +18,7 @@ module.exports = {
       {
         singleQuote: true,
         trailingComma: 'all',
+        printWidth: 100
       },
     ],
     'import/no-extraneous-dependencies': [
@@ -37,4 +41,39 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
+  overrides: [
+    {
+      files: ['./icons/*.svg'],
+      parser: '@html-eslint/parser',
+      rules: {
+        'prettier/prettier': 'off',
+        '@html-eslint/require-doctype': 'off',
+        '@html-eslint/no-duplicate-attrs': 'error',
+        '@html-eslint/no-inline-styles': 'error',
+        '@html-eslint/require-attrs': [
+           'error',
+             ...Object.entries(DEFAULT_ATTRS)
+               .map(([attr, value]) => ({ tag: 'svg', attr, value: String(value) }))
+        ],
+        '@html-eslint/indent': ['error', 2],
+        "@html-eslint/no-multiple-empty-lines": ["error", { "max": 0 }],
+        '@html-eslint/no-extra-spacing-attrs': [
+          'error',
+          {
+            enforceBeforeSelfClose: true,
+          },
+        ],
+        '@html-eslint/require-closing-tags': [
+          'error',
+          {
+            selfClosing: 'always',
+            allowSelfClosingCustom: true,
+          },
+        ],
+        '@html-eslint/element-newline': 'error',
+        '@html-eslint/no-trailing-spaces': 'error',
+        '@html-eslint/quotes': 'error',
+      }
+    },
+  ],
 };

.github/workflows/linting.yml

@@ -0,0 +1,25 @@
+name: Linting
+
+on:
+  pull_request:
+    paths:
+      - icons/**
+
+jobs:
+  linting:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Linter
+        run: pnpm lint

.github/workflows/pull-request.yml

@@ -39,8 +39,9 @@ jobs:
           # Example for the previous substitution
           # input: +++ b/icons/accessibility.json%0A@@ -2,0 +3 @@%0A+  "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
           # output: ::$ANNOTATION_SEVERITY file=icons/accessibility.json,line=2,endLine=3,title=$ANNOTATION_TITLE::$ANNOTATION_DESCRIPTION%0A%0A+  "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
-      - name: Fail if contributors have changed
-        run: git diff --exit-code -- icons/*.json
+      # - name: Fail if contributors have changed
+      #   run: git diff --exit-code -- icons/*.json
+
   add-changed-icons-comment:
     runs-on: ubuntu-latest
     permissions:

.vscode/settings.json

@@ -4,5 +4,10 @@
     "preact",
     "Preact"
   ],
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "svg"
+  ],
   "svg.preview.background": "transparent"
 }

icons/spline.json

@@ -4,7 +4,14 @@
     "ericfennis",
     "jguddas"
   ],
-  "tags": [],
+  "tags": [
+    "path",
+    "pen",
+    "tool",
+    "shape",
+    "curve",
+    "draw"
+  ],
   "categories": [
     "design"
   ]

icons/umbrella-off.json

@@ -5,7 +5,6 @@
     "csandman",
     "ericfennis",
     "karsa-mistmere",
-    "jguddas",
     "jguddas"
   ],
   "tags": [

package.json

@@ -29,21 +29,22 @@
     "generate:contributors": "node ./scripts/updateContributors.mjs icons/*.svg",
     "generate:nextJSAliases": "node ./scripts/generateNextJSAliases.mjs",
     "postinstall": "husky install",
-    "lint:js": "eslint --ext .ts,.js,.mjs ./{packages/lucide,scripts}",
+    "lint:es": "eslint .",
     "lint:json:icons": "ajv --spec=draft2020 -s icon.schema.json -d 'icons/*.json' > /dev/null",
     "lint:json:categories": "ajv --spec=draft2020 -s category.schema.json -d 'categories/*.json' > /dev/null",
     "lint:json": "pnpm run lint:json:icons && pnpm run lint:json:categories",
-    "lint": "pnpm lint:js lint:json",
+    "lint": "pnpm lint:es && pnpm lint:json",
     "prepare": "husky install",
     "gi": "node ./scripts/generate/generateIcons.mjs"
   },
   "devDependencies": {
+    "@html-eslint/eslint-plugin": "^0.19.1",
+    "@html-eslint/parser": "^0.19.1",
     "@octokit/rest": "^19.0.13",
     "ajv-cli": "^5.0.0",
     "eslint": "^8.43.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
@@ -54,7 +55,14 @@
     "semver": "^7.5.2",
     "simple-git": "^3.19.1",
     "svgo": "^3.0.2",
-    "svgson": "^5.2.1"
+    "svgson": "^5.2.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-custom-alias": "^1.3.2",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.28.0"
   },
   "lint-staged": {
     "icons/*.svg": [

packages/lucide-angular/karma.conf.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies, global-require, func-names */
+/* eslint-disable global-require, func-names */
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 process.env.CHROME_BIN = require('puppeteer').executablePath();

packages/lucide-vue/nuxt.js

@@ -1,7 +1,7 @@
 import { join } from 'path';
 
-export default function() {
-  this.nuxt.hook('components:dirs', dirs => {
+export default function LucideNuxtPlugin() {
+  this.nuxt.hook('components:dirs', (dirs) => {
     dirs.push({
       path: join(__dirname, 'dist', 'esm', 'icons'),
       prefix: 'Icon',

packages/lucide-vue/package.json

@@ -37,7 +37,7 @@
     "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",
-    "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtention=.ts --exportFileName=index.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",
     "version": "pnpm version --git-tag-version=false"

tools/build-icons/building/generateIconFiles.mjs

@@ -33,6 +33,7 @@ export default ({
       ? prettier.format(elementTemplate, {
           singleQuote: true,
           trailingComma: 'all',
+          printWidth: 100,
           parser: 'babel',
         })
       : elementTemplate;

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "declaration": false,
+    "noEmitOnError": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "module": "ESNext",
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "sourceMap": true,
+  }
+}