Merge branch 'main' into svg-eslint

lucide-icons · Nov 1, 2023 · c400494 · c400494
2 parents 8804f29 + a1a9a4d
commit c400494
Show file tree

Hide file tree

Showing 18 changed files with 399 additions and 374 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
 ### Why choose Lucide over Feather Icons
 
 - More icons to work with: Lucide already has hundreds of icons more than Feather does.
-- Official librairies and integrations with popular frameworks and design tools.
+- Official libraries and integrations with popular frameworks and design tools.
 - Well maintained code base.
 - Active community, regularly growing and improving the set.
 

diff --git a/docs/.vitepress/api/gh-icon/[...data].get.ts b/docs/.vitepress/api/gh-icon/[...data].get.ts
@@ -17,19 +17,28 @@ export default eventHandler((event) => {
 
   const children = [];
 
-  // If the icon already exists, it uses the existing icon as the backdrop.
-  // If the icon does not exist but an icon exists that starts with the same group name, that icon
-  // is used as the backdrop
-  const backdropName =
-    name in iconNodes ? name : name.split('-')[0] in iconNodes ? name.split('-')[0] : null;
+  // Finds the longest matching icon to be use as the backdrop.
+  // For `square-dashed-bottom-code` it suggests `square-dashed-bottom-code`.
+  // For `square-dashed-bottom-i-dont-exist` it suggests `square-dashed-bottom`.
+  const backdropName = name
+    .split('-')
+    .map((_, idx, arr) => arr.slice(0, idx + 1).join('-'))
+    .reverse()
+    .find((groupName) => groupName in iconNodes);
   if (backdropName) {
     const iconNode = iconNodes[backdropName];
 
     const LucideIcon = createLucideIcon(backdropName, iconNode);
     const svg = renderToStaticMarkup(createElement(LucideIcon));
     const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');
 
-    children.push(createElement(Backdrop, { backdropString, src }));
+    children.push(
+      createElement(Backdrop, {
+        backdropString,
+        src,
+        color: name in iconNodes ? 'red' : '#777',
+      })
+    );
   }
 
   const svg = Buffer.from(

diff --git a/docs/.vitepress/lib/SvgPreview/Backdrop.tsx b/docs/.vitepress/lib/SvgPreview/Backdrop.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
 interface BackdropProps {
-  src: string
-  backdropString: string
+  src: string;
+  color?: string;
+  backdropString: string;
 }
 
-const Backdrop = ({ src, backdropString }: BackdropProps): JSX.Element => {
+const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.Element => {
   return (
     <>
       <defs xmlns="http://www.w3.org/2000/svg">
@@ -16,8 +17,8 @@ const Backdrop = ({ src, backdropString }: BackdropProps): JSX.Element => {
           patternUnits="userSpaceOnUse"
           patternTransform="rotate(45 50 50)"
         >
-          <line stroke="red" strokeWidth={0.1} y2={1} />
-          <line stroke="red" strokeWidth={0.1} y2={1} />
+          <line stroke={color} strokeWidth={0.1} y2={1} />
+          <line stroke={color} strokeWidth={0.1} y2={1} />
         </pattern>
       </defs>
       <mask id="svg-preview-backdrop-mask-outline" maskUnits="userSpaceOnUse">
@@ -29,20 +30,8 @@ const Backdrop = ({ src, backdropString }: BackdropProps): JSX.Element => {
         <g dangerouslySetInnerHTML={{ __html: src }} strokeWidth={2.05} />
         <g strokeWidth={1.75} dangerouslySetInnerHTML={{ __html: backdropString }} />
       </mask>
-      <g
-        strokeWidth={2.25}
-        stroke="url(#pattern)"
-        mask={'url(#svg-preview-backdrop-mask-outline)'}
-      >
-        <rect
-          x="0"
-          y="0"
-          width="24"
-          height="24"
-          fill="url(#pattern)"
-          opacity={0.5}
-          stroke="none"
-        />
+      <g strokeWidth={2.25} stroke="url(#pattern)" mask={'url(#svg-preview-backdrop-mask-outline)'}>
+        <rect x="0" y="0" width="24" height="24" fill="url(#pattern)" opacity={0.5} stroke="none" />
       </g>
       <rect
         x="0"
@@ -58,14 +47,13 @@ const Backdrop = ({ src, backdropString }: BackdropProps): JSX.Element => {
         y="0"
         width="24"
         height="24"
-        fill="red"
+        fill={color}
         opacity={0.5}
         stroke="none"
         mask={'url(#svg-preview-backdrop-mask-fill)'}
       />
     </>
-  )
-}
-
+  );
+};
 
 export default Backdrop;
diff --git a/docs/.vitepress/theme/components/base/Badge.vue b/docs/.vitepress/theme/components/base/Badge.vue
@@ -36,6 +36,7 @@ const component = computed(() => props.href ? 'a' : 'div')
   border-radius: 6px;
   background-color: var(--vp-c-bg-alt);
   color: var(--vp-c-text-1);
+  text-decoration: none;
   /* width: 56px;
   height: 56px; */
   font-size: 16px;

diff --git a/packages/lucide-angular/.eslintrc.js b/packages/lucide-angular/.eslintrc.js
@@ -1,43 +1,37 @@
 module.exports = {
-    "root": true,
-    "overrides": [
-        {
-            "files": [
-                "*.ts"
-            ],
-            "extends": [
-                "eslint:recommended",
-                "plugin:@typescript-eslint/recommended",
-                "plugin:@angular-eslint/recommended",
-                "plugin:@angular-eslint/template/process-inline-templates"
-            ],
-            "rules": {
-                "@angular-eslint/directive-selector": [
-                    "error",
-                    {
-                        "type": "attribute",
-                        "prefix": "lucide",
-                        "style": "camelCase"
-                    }
-                ],
-                "@angular-eslint/component-selector": [
-                    "error",
-                    {
-                        "type": "element",
-                        "prefix": ["lucide", "i", "span"],
-                        "style": "kebab-case"
-                    }
-                ]
-            }
-        },
-        {
-            "files": [
-                "*.html"
-            ],
-            "extends": [
-                "plugin:@angular-eslint/template/recommended"
-            ],
-            "rules": {}
-        }
-    ]
+  root: true,
+  overrides: [
+    {
+      files: ['*.ts'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@angular-eslint/recommended',
+        'plugin:@angular-eslint/template/process-inline-templates',
+      ],
+      rules: {
+        '@angular-eslint/directive-selector': [
+          'error',
+          {
+            type: 'attribute',
+            prefix: 'lucide',
+            style: 'camelCase',
+          },
+        ],
+        '@angular-eslint/component-selector': [
+          'error',
+          {
+            type: 'element',
+            prefix: ['lucide', 'i', 'span'],
+            style: 'kebab-case',
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.html'],
+      extends: ['plugin:@angular-eslint/template/recommended'],
+      rules: {},
+    },
+  ],
 };
diff --git a/packages/lucide-angular/scripts/exportTemplate.mjs b/packages/lucide-angular/scripts/exportTemplate.mjs
@@ -1,13 +1,8 @@
 export default ({ componentName, children }) => `
 import { LucideIconData } from './types';
-import defaultAttributes from './constants/default-attributes';
 
 /* eslint-disable no-shadow-restricted-names */
-const ${componentName}: LucideIconData = [
-    'svg',
-    defaultAttributes,
-    ${JSON.stringify(children)}
-];
+const ${componentName}: LucideIconData = ${JSON.stringify(children)};
 
 export default ${componentName};
 `;
diff --git a/packages/lucide-angular/src/icons/constants/default-attributes.ts b/packages/lucide-angular/src/icons/constants/default-attributes.ts
@@ -1,11 +1,11 @@
 export default {
-    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',
+  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',
 };
diff --git a/packages/lucide-angular/src/icons/types/index.ts b/packages/lucide-angular/src/icons/types/index.ts
@@ -1,6 +1,6 @@
 type HtmlAttributes = { [key: string]: string | number };
 export type LucideIconNode = readonly [string, HtmlAttributes];
-export type LucideIconData = readonly [string, HtmlAttributes, LucideIconNode[]?];
+export type LucideIconData = readonly LucideIconNode[];
 export type LucideIcons = { [key: string]: LucideIconData };
 
 /** @deprecated Use LucideIconData instead. Will be removed in v1.0. */

diff --git a/packages/lucide-angular/src/lib/icons.provider.ts b/packages/lucide-angular/src/lib/icons.provider.ts
@@ -1,4 +1,4 @@
 /** @deprecated Use the injection token LUCIDE_ICONS instead. Will be removed in v1.0. */
 export class Icons {
-    constructor(private icons: object) {}
+  constructor(private icons: object) {}
 }