Optimize russian-ruble.svg (#1541)

* Refine `bug` icon

* Add `bug-off` icon

* Add `bug-play` (debug) icon

* Add `bug-x` icon

* Add `bug-x` variant

* Delete bug-x.json

* Delete bug-x.svg

* Delete bug-x-2.json

* Delete bug-x-2.svg

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

.github/ISSUE_TEMPLATE/01_icon_request.yml

@@ -0,0 +1,49 @@
+name: Icon request
+description: Suggest a new icon for this project
+labels: ['🙌 icon request']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before submitting an icon request check if it has already been requested. If there is an open request, please add a 👍.
+
+        **Important note**: No new brand logos are allowed, see https://github.com/lucide-icons/lucide/issues/670.
+        Existing brand icons will also be phased out. For brand icons, consider using https://simpleicons.org, which offers purpose-built SVGs that are also on a 24×24px grid.
+  - type: input
+    id: name
+    attributes:
+      label: Icon name
+      description: What should this icon depict? For multiple icons, provide a comma-separated list.
+    validations:
+      required: true
+  - type: textarea
+    id: use-cases
+    attributes:
+      label: Use cases
+      description: Why do you need this icon? Include at least two real-life use cases per requested icon, avoiding generic descriptions like "it's a car icon".
+      placeholder: e.g. I need a star icon to use in my rating system.
+    validations:
+      required: true
+  - type: textarea
+    id: design-ideas
+    attributes:
+      label: Design ideas
+      description: What should this icon look like? Provide simple, minimalistic icon examples from other sets or your own drafts to help us visualize your request.
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Please review the following checklist before submitting your request.
+      options:
+        - label: I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
+          required: true
+        - label: I have searched existing icons to make sure it does not already exist and I didn't find any.
+          required: true
+        - label: I am not requesting a brand logo and the art is not protected by copyright.
+          required: true
+        - label: I am not requesting an icon that includes religious, political imagery or hate symbols.
+          required: true
+        - label: I have provided appropriate use cases for the icon(s) requested.
+          required: true

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -0,0 +1,90 @@
+name: Bug report
+description: Create a report to help us improve
+labels: ['🐛 bug']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
+  - type: checkboxes
+    id: packages
+    attributes:
+      label: Package
+      description: Which Lucide packages are affected? You may select more than one.
+      options:
+        - label: lucide
+        - label: lucide-angular
+        - label: lucide-flutter
+        - label: lucide-preact
+        - label: lucide-react
+        - label: lucide-react-native
+        - label: lucide-solid
+        - label: lucide-svelte
+        - label: lucide-vue
+        - label: lucide-vue-next
+        - label: Figma plugin
+        - label: source/main
+        - label: other/not relevant
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      description: What version of Lucide are you running?
+      placeholder: e.g. 0.289.1
+    validations:
+      required: true
+  - type: checkboxes
+    id: browsers
+    attributes:
+      label: Browser
+      description: In which browser(s) are you experiencing the issue? You may select more than one.
+      options:
+        - label: Chrome/Chromium
+        - label: Firefox
+        - label: Safari
+        - label: Edge
+        - label: iOS Safari
+        - label: Opera
+        - label: Other/not relevant
+    validations:
+      required: false
+  - type: checkboxes
+    id: operating-systems
+    attributes:
+      label: Operating system
+      description: In which operating systems a you experiencing the issue? You may select more than one.
+      options:
+        - label: Windows
+        - label: Linux
+        - label: macOS
+        - label: Other/not relevant
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Try to describe in detail the problem you're running into and provide additional context about your working environment if necessary.
+      placeholder: e.g. When I do X, Y happens instead of Z
+    validations:
+      required: true
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Please provide a detailed guide on how this issue can be reproduced or a live example with a working reproduction on Codesandbox, JSFiddle or similar.
+      placeholder: |
+        1. Import `check` icon
+        2. Add to a React component/view
+        3. Run the react app
+        4. Notice that the `check` isn't rendering correctly which seems a encoding problem
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Please review the following checklist before submitting your issue.
+      options:
+        - label: I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
+          required: true

.github/ISSUE_TEMPLATE/03_bug_report_site.yml

@@ -0,0 +1,62 @@
+name: lucide.dev bug report
+description: Help us improve the Lucide site
+labels: ['🐛 bug', '🌍 site']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
+  - type: checkboxes
+    id: browsers
+    attributes:
+      label: Browser
+      description: In which browser(s) are you experiencing the issue? You may select more than one.
+      options:
+        - label: Chrome/Chromium
+        - label: Firefox
+        - label: Safari
+        - label: Edge
+        - label: iOS Safari
+        - label: Opera
+        - label: Other/not relevant
+    validations:
+      required: false
+  - type: checkboxes
+    id: operating-systems
+    attributes:
+      label: Operating system
+      description: In which operating systems are you experiencing the issue? You may select more than one.
+      options:
+        - label: Windows
+        - label: Linux
+        - label: macOS
+        - label: Other/not relevant
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Try to describe in detail the problem you're running into and provide additional context about your working environment if necessary.
+      placeholder: e.g. When I do X, Y happens instead of Z
+    validations:
+      required: true
+  - type: textarea
+    id: stepsToReproduce
+    attributes:
+      label: Steps to reproduce
+      description: Please provide a detailed guide on how this issue can be reproduced.
+      placeholder: |
+        1. I click on an icon
+        2. I click on `Copy SVG` in the drawer
+        3. I paste from the clipboard
+        4. A base64 encoded data URI is inserted.
+        ...
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Please review the following checklist before submitting your issue.
+      options:
+        - label: I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
+          required: true

.github/ISSUE_TEMPLATE/04_feature_request.yml

@@ -0,0 +1,53 @@
+name: Feature request
+description: Share with us your ideas on how Lucide could be improved upon.
+labels: ['💡 idea']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before submitting a new feature request, please search to see if someone has filed a similar request before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
+  - type: checkboxes
+    id: packages
+    attributes:
+      label: Package
+      description: Which Lucide project do you wish this feature were added to? You may select more than one.
+      options:
+        - label: lucide
+        - label: lucide-angular
+        - label: lucide-flutter
+        - label: lucide-preact
+        - label: lucide-react
+        - label: lucide-react-native
+        - label: lucide-solid
+        - label: lucide-svelte
+        - label: lucide-vue
+        - label: lucide-vue-next
+        - label: Figma plugin
+        - label: all JS packages
+        - label: site
+    validations:
+      required: true
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Try to describe in detail the feature you wish existed.
+      placeholder: e.g. I want to be able to set extra CSS classes on icon components.
+    validations:
+      required: true
+  - type: textarea
+    id: use-cases
+    attributes:
+      label: Use cases
+      description: Why do you need this feature? Provide real-life use cases as to why this feature will be useful for others.
+      placeholder: e.g. I could use the extra classes to add animation or global custom styling to some icons.
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Please check the following items before submitting your issue.
+      options:
+        - label: I have searched the existing issues to make sure this bug has not already been reported.
+          required: true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,68 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-labels: "🐛 bug"
----
-
-<!--
-Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
--->
-
-## Prerequisites
-
-* Version:
-* Are you running from source/main:
-* Are you using a released build:
-* Operating system: 
-* Bits:
-
-## Step to reproduce
-
-*(Type here)*
-
-### Actual behavior
-
-## Any message or error
-
-*(Type here)*
-
-## Resources
-
-* Links
-* Screenshots
-
-
-Here is what a great bug report would look like:
-
-```
-## Prerequisites
-
-Version: Release v3.1.0
-Running from: Import using webpack
-Operating system: Mac OSX
-Bits: 64 bits
-
-## Step to reproduce
-
- - Import `check` icon
- - Add to a React component/view
- - Run the react app
- - Notice that the `check` isn't rendering correctly which seems a encoding problem
- 
-### Actual behavior:
-
- - Import `check` icon
- - Add to a React component/view
- - Run the react app
- - Check is displayed with correct encoding (e.g UTF-8)
-
-## Any message or error
-
-No console output
-...
-
-## Resources
-
-No resources
-...
-```

.github/ISSUE_TEMPLATE/icon_request.md

@@ -1,18 +0,0 @@
----
-name: Icon request
-about: Suggest an new icon for this project
-labels: "🙌 icon request"
----
-
-<!--
-Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a 👍.
-A note about brand logos and related material : We follow the decision from Feather Icons (https://github.com/feathericons/feather/issues/763) to deprecate icons relating to brands.
-You will find some in the set, but we won't add any new ones. https://simpleicons.org has 24x24 SVG icons for this purpose.
-
--->
-
-## Icon Request
-
-* Icon name:
-* Use case:
-* _Screenshots_ of similar icons:

.github/PULL_REQUEST_TEMPLATE/new-icon.md

@@ -1,15 +0,0 @@
----
-name: New icon
-about: Add a new icon to the library
-labels: "🎨 <icon"
----
-
-<!-- Thanks for submitting an icon! Please make sure you read the icon design guide
-at https://github.com/lucide-icons/lucide/blob/main/docs/icon-design-guide.md beforehand,
-and please fill everything below. -->
-
-- **Name of the icon** : <!-- `icon` -->
-- **Tags (alternative names for this icon)** (add them in as a separate json file using the same icon name) :
-- **What is the purpose of this icon?** : <!-- Shows that one can click it to... / Is used to denote or label... -->
-- **100% scale preview** : <!-- upload an image -->
-- **Have you considered alternative possibilities** for its naming or design? :

.github/pull_request_template.md

@@ -0,0 +1,55 @@
+<!-- Thank you for contributing! -->
+
+<!-- Insert `closes #issueNumber` here if merging this PR will resolve an existing issue -->
+
+## What is the purpose of this pull request?
+<!-- Please choose one of the following, and put an "x" next to it. -->
+- [ ] New Icon
+- [ ] Bug fix
+- [ ] New Feature
+- [ ] Documentation update
+- [ ] Other:
+
+### Description
+<!-- Please insert your description here and provide info about the "what" this PR is contribution -->
+
+### Icon use case <!-- ONLY for new icons, remove this part if not icon PR -->
+<!-- What is the purpose of this icon? For each icon added, please insert at least two real life use cases (the more the better). Text like "it's a car icon" is not accepted. -->
+
+### Alternative icon designs <!-- ONLY for new icons, remove this part if not icon PR -->
+<!-- If you have any alternative icon designs, please attach them here. -->
+
+## Icon Design Checklist <!-- ONLY for new icons, remove this part if not icon PR -->
+
+### Concept <!-- ONLY for new icons -->
+<!-- All of these requirements must be fulfilled. -->
+- [ ] I have provided valid use cases for each icon.
+- [ ] I have not added any a brand or logo icon.
+- [ ] I have not used any hate symbols.
+- [ ] I have not included any religious or political imagery.
+
+### Author, credits & license<!-- ONLY for new icons. -->
+<!-- Please choose one of the following, and put an "x" next to it. -->
+- [ ] The icons are solely my own creation.
+- [ ] The icons were originally created in #<issueNumber> by @<githubUser>
+- [ ] I've based them on the following Lucide icons: <!-- provide the list of icons -->
+- [ ] I've based them on the following design: <!-- provide source URL and license permitting use -->
+
+### Naming <!-- ONLY for new icons -->
+<!-- All of these requirements must be fulfilled. -->
+- [ ] I've read and followed the [naming conventions](https://lucide.dev/guide/design/icon-design-guide#naming-conventions)
+- [ ] I've named icons by what they are rather than their use case.
+- [ ] I've provided meta JSON files in `icons/[iconName].json`.
+
+### Design <!-- ONLY for new icons -->
+<!-- All of these requirements must be fulfilled. -->
+- [ ] I've read and followed the [icon design guidelines](https://lucide.dev/guide/design/icon-design-guide)
+- [ ] I've made sure that the icons look sharp on low DPI displays.
+- [ ] I've made sure that the icons look consistent with the icon set in size, optical volume and density.
+- [ ] I've made sure that the icons are visually centered.
+- [ ] I've correctly optimized all icons to two points of precision.
+
+## Before Submitting <!-- For every PR! -->
+<!-- All of these requirements must be fulfilled. -->
+- [ ] I've read the [Contribution Guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
+- [ ] I've checked if there was an existing PR that solves the same issue.

.github/workflows/pull-request.yml

@@ -22,6 +22,20 @@ jobs:
         uses: tj-actions/changed-files@v35
         with:
           files: icons/*.svg
+      - name: Generate 24px dpi preview
+        id: generate-24px-dpi-preview
+        run: |
+          delimiter="$(openssl rand -hex 8)"
+          echo "body<<$delimiter" >> $GITHUB_OUTPUT
+          for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
+            cat "$file" | # get file content
+            tr '\n' ' ' | # remove line breaks
+            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
+            base64 -w 0 | # encode svg
+            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/dpi/24/&.svg\"/> |"
+          done | tr '\n' ' ' >> $GITHUB_OUTPUT
+          echo >> $GITHUB_OUTPUT
+          echo "$delimiter" >> $GITHUB_OUTPUT
       - name: Generate cohesion check random
         id: generate-cohesion-check-random
         run: |
@@ -134,6 +148,10 @@ jobs:
             ${{ steps.generate-3px-stroke-width.outputs.body }}<br/>
             </details>
             <details>
+            <summary>DPI Preview (24px)</summary>
+            ${{ steps.generate-24px-dpi-preview.outputs.body }}<br/>
+            </details>
+            <details>
             <summary>Icon X-rays</summary>
             ${{ steps.generate-x-rays.outputs.body }}
             </details>

docs/.vitepress/api/gh-icon/dpi/[...data].get.ts

@@ -0,0 +1,73 @@
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { Resvg, initWasm } from '@resvg/resvg-wasm';
+import wasm from './loadWasm';
+
+var initializedResvg = initWasm(wasm);
+
+export default eventHandler(async (event) => {
+  const { params = {} } = event.context;
+  await initializedResvg;
+
+  const imageSize = 96;
+  const [iconSizeString, svgData] = params.data.split('/');
+  const iconSize = parseInt(iconSizeString, 10);
+  const data = svgData.slice(0, -4);
+
+  const src = Buffer.from(data, 'base64').toString('utf8');
+  const svg = (src.includes('<svg') ? src : `<svg>${src}</svg>`)
+    .replace(/(\r\n|\n|\r)/gm, '')
+    .replace(
+      /<svg[^>]*/,
+      `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="${iconSize}"
+  height="${iconSize}"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#fff"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+`
+    );
+
+  const resvg = new Resvg(svg, { background: '#000' });
+  const pngData = resvg.render();
+  const pngBuffer = Buffer.from(pngData.asPng());
+
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+
+  return `
+<svg xmlns="http://www.w3.org/2000/svg" width="${imageSize}" height="${imageSize}" viewBox="0 0 ${imageSize} ${imageSize}">
+  <style>
+    @media screen and (prefers-color-scheme: light) {
+      #fallback-background { fill: transparent; }
+    }
+    @media screen and (prefers-color-scheme: dark) {
+      #fallback-background { fill: transparent; }
+      rect { fill: #fff; }
+    }
+  </style>
+  <mask id="mask">
+    <image
+      width="${imageSize}"
+      height="${imageSize}"
+      href="data:image/png;base64,${pngBuffer.toString('base64')}"
+      image-rendering="pixelated"
+    />
+  </mask>
+  <rect
+    id="fallback-background"
+    width="${imageSize}"
+    height="${imageSize}" ry="${imageSize / 24}"
+    fill="#fff"
+  />
+  <rect
+    width="${imageSize}"
+    height="${imageSize}"
+    fill="#000"
+    mask="url(#mask)"
+  />
+</svg>`;
+});

docs/.vitepress/api/gh-icon/dpi/loadWasm.ts

@@ -0,0 +1,15 @@
+import fs from 'fs';
+import module from 'node:module';
+/* WASM_IMPORT */
+
+let wasm;
+
+if (process.env.NODE_ENV === 'development') {
+  const require = module.createRequire(import.meta.url);
+
+  wasm = fs.readFileSync(require.resolve('@resvg/resvg-wasm/index_bg.wasm'));
+} else {
+  wasm = resvg_wasm;
+}
+
+export default wasm;

docs/.vitepress/api/gh-icon/stroke-width/[...data].get.ts

@@ -22,10 +22,19 @@ export default eventHandler((event) => {
 
   const svg = Buffer.from(
     // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(Icon, { strokeWidth })).replace(
-      />/,
-      '><style>@media screen and (prefers-color-scheme: dark) { svg { stroke: #fff } }</style>'
-    )
+    renderToString(createElement(Icon, { strokeWidth }))
+      .replace(/fill\="none"/, 'fill="#fff"')
+      .replace(
+        />/,
+        `><style>
+        @media screen and (prefers-color-scheme: light) {
+          svg { fill: transparent !important; }
+        }
+        @media screen and (prefers-color-scheme: dark) {
+          svg { stroke: #fff; fill: transparent !important; }
+        }
+      </style>`
+      )
   ).toString('utf8');
 
   defaultContentType(event, 'image/svg+xml')

docs/.vitepress/lib/SvgPreview/index.tsx

@@ -4,7 +4,7 @@ import { getPaths, assert } from './utils';
 
 const Grid = ({
   radius,
-  fill,
+  fill = '#fff',
   ...props
 }: {
   strokeWidth: number;
@@ -12,6 +12,7 @@ const Grid = ({
 } & PathProps<'stroke', 'strokeWidth'>) => (
   <g className="svg-preview-grid-group" strokeLinecap="butt" {...props}>
     <rect
+      className="svg-preview-grid-rect"
       width={24 - props.strokeWidth}
       height={24 - props.strokeWidth}
       x={props.strokeWidth / 2}
@@ -207,7 +208,12 @@ const SvgPreview = React.forwardRef<
 >(({ src, children, showGrid = false, ...props }, ref) => {
   const paths = typeof src === 'string' ? getPaths(src) : src;
 
-  const darkModeCss = `@media screen and (prefers-color-scheme: dark) {
+  const darkModeCss = `@media screen and (prefers-color-scheme: light) {
+  .svg-preview-grid-rect { fill: none }
+}
+@media screen and (prefers-color-scheme: dark) {
+  .svg-preview-grid-rect { fill: none }
+  .svg
   .svg-preview-grid-group,
   .svg-preview-radii-group,
   .svg-preview-shadow-mask-group,

docs/.vitepress/vue-shim.d.ts

@@ -1,10 +1,18 @@
-declare module "*.vue" {
-  import Vue from "vue";
+declare module '*.vue' {
+  import Vue from 'vue';
   export default Vue;
 }
 
-declare module "*.data.ts" {
+declare module '*.data.ts' {
   const data: any;
 
   export { data };
 }
+
+declare module '*.wasm' {}
+
+declare const resvg_wasm: RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+declare module 'node:module' {
+  function createRequire(filename: string): NodeRequire;
+}

docs/guide/design/icon-design-guide.md

@@ -2,60 +2,113 @@
 title: Icon Design Guide
 ---
 
-# Icon Design Principles
+## Icon Design Principles
 
 Here are rules that should be followed to keep quality and consistency when making icons for Lucide.
 
-## Summary of the rules we have
-
-1. Icons must be designed on a **24 by 24 pixels** canvas.
-2. Icons must have at least **1 pixel padding** within the canvas.
-3. Icons must have a **stroke width of 2 pixels**.
-4. Icons must use **round joins**.
-5. Icons must use **round caps**.
-6. Icons must use **centered strokes**.
-7. Shapes (such as rectangles) in icons must have **border radius of 2 pixels**.
-8. Distinct elements must have **2 pixels of spacing between each other**.
-
-## The Rules Visualized
-
-### 1. Icons must be designed on a 24 by 24 pixels canvas.
+### 1. Icons must be designed on a **24 by 24 pixels** canvas.
 
 ![24px-24px](../../images/24px-24px.svg?raw=true "24px-24px")
 
-### 2. Icons must have at least 1 pixel padding within the canvas.
+### 2. Icons must have at least **1 pixel padding** within the canvas.
 
 ![1px-padding](../../images/1px-padding.svg?raw=true "1px-padding")
 
-### 3. Icons must have a stroke width of 2 pixels.
+### 3. Icons must have a **stroke width of 2 pixels**.
 
 ![2px-stroke](../../images/2px-stroke.svg?raw=true "2px-stroke")
 
-### 4. Icons must use round joins.
+### 4. Icons must use **round joins**.
 
 ![round-joints](../../images/round-joints.svg?raw=true "round-joints")
 
-### 5. Icons must use round caps.
+### 5. Icons must use **round caps**.
 
 ![round-caps](../../images/round-caps.svg?raw=true "round-caps")
 
-### 6. Icons must use centered strokes.
+### 6. Icons must use **centered strokes**.
 
 ![centered-strokes](../../images/centered-strokes.svg?raw=true "centered-strokes")
 
-### 7. Shapes (such as squares) in icons must have border radius of 2 pixels.
+### 7. Shapes (such as rectangles) must have a **border radius of**
+
+#### A. **2 pixels** if they are at least 8 pixels in size
 
 ![2px-border-radius](../../images/2px-border-radius.svg?raw=true "2px-border-radius")
 
-### 8. Distinct elements must have 2 pixels of spacing between each other.
+#### B. **1 pixel** if they are smaller than 8 pixels in size
+
+![1px-border-radius](../../images/1px-border-radius.svg?raw=true "1px-border-radius")
+
+### 8. Distinct elements must have **2 pixels of spacing between each other**
 
 ![2px-element-spacing](../../images/2px-element-spacing.svg?raw=true "2px-element-spacing")
 
+### 9. Icons should have a similar optical volume to `circle` and `square`.
+
+![optical-volume-ideal](../../images/optical-volume-ideal.svg?raw=true "optical-volume-ideal")
+
+![optical-volume-low](../../images/optical-volume-low.svg?raw=true "optical-volume-low")
+
+![optical-volume-high](../../images/optical-volume-high.svg?raw=true "optical-volume-high")
+
+**Tip:** place your icon next to circle or square and blur them both; your icon should not feel much darker than the base shape.
+
+### 10. Icons should be visually centered by their center of gravity.
+
+![visually-centered](../../images/visually-centered.svg?raw=true "visually-centered")
+
+![visually-centered-bad](../../images/visually-centered-bad.svg?raw=true "visually-centered-bad")
+
+**Tip:** place your icon both above/below and next to the square or circle icon and check if it feels off center. Symmetrical icons should always be aligned to the center.
+
+### 11. Icons should have similar visual density and level of detail.
+
+![density-ideal](../../images/density-ideal.svg?raw=true "density-ideal")
+
+![density-high](../../images/density-high.svg?raw=true "density-high")
+
+**Tip:** try to make abstractions to dense elements. Blur your icon, and when blurred it should not feel overly dark.
+
+### 12. Continuous curves should join smoothly.
+
+![curvature-smooth](../../images/curvature-smooth.svg?raw=true "curvature-smooth")
+
+![curvature-uneven](../../images/curvature-uneven.svg?raw=true "curvature-uneven")
+
+**Tip:** make sure to use arcs or quadratic curves, when using cubic curves control points should have mirrored angles for smooth curves.
+
+### 13. Icons should aim to be pixel perfect so that they will be sharp on low DPI displays.
+
+![pixel-perfection-ideal](../../images/pixel-perfection-ideal.svg?raw=true "pixel-perfection-ideal")
+
+![pixel-perfection-bad](../../images/pixel-perfection-bad.svg?raw=true "pixel-perfection-bad")
+
+**Tip:** whenever possible align elements and arc centers to the grid.
+
+## Naming conventions
+
+1. Icon names use lower kebab case.\
+   For example: `arrow-up` instead of `Arrow Up`.
+
+2. Icon names use International English names, as opposed to local variants.\
+   For example:  `color` instead of `colour`.
+
+3. Icons should be named for what they depict rather than their use case or what they represent.\
+   For example: `floppy-disk` instead of `save` and `circle-slash` rather than `ban`.
+
+4. Icons that are part of a group are named `<group>-<variant>`.\
+   For example: `badge-plus` is based on `badge`.
+
+5. Icon names for alternate icons should represent what makes the alternate unique instead of being numbered.\
+   For example: `send-horizontal` instead of `send-2`.
+
+6. Names containing numerals are not allowed, unless the number itself is represented in the icon.\
+   For example: `arrow-down-0-to-1` contains both numerals.
+
 ## Code Conventions
 
-Before an icon is added to the library, we like to have readable and optimized svg code.
-
-Never use [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents.
+Before an icon is added to the library, we like to have readable and optimized SVG code.
 
 ### Global Attributes
 
@@ -79,11 +132,26 @@ For each icon these attributes are applied, corresponding to the above rules.
 
 ### Minify paths
 
-Code of paths can get really big.
-To reduce file size we like to minify the code.
-We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths.
+The code of paths can sometimes get quite large. To reduce file size we like to minify the code.
+We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths to 2 points of precision.
 
-### JSON metadata descriptor
+### Allowed elements
+
+SVG files may only contain simple path and shape elements, which may not have any attributes other than sizing and spacing.\
+In practice only the following elements and attributes are allowed:
+* `<path d>`
+* `<line x1 x2>`
+* `<polygon points>`
+* `<polyline points>`
+* `<circle cx cy r>`
+* `<ellipse cx cy rx ry>`
+* `<rect x y width height rx>`
+
+This also means that no transforms, filters, fills or explicit strokes are allowed.
+
+Never use [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents.
+
+## JSON metadata descriptor
 
 Each icon added must also come with a matching JSON file listing tags and categories for the icon.
 Please use the following template:
@@ -91,6 +159,10 @@ Please use the following template:
 ```json
 {
   "$schema": "../icon.schema.json",
+  "contributors": [
+    "github-username",
+    "another-github-username"
+  ],
   "tags": [
     "foo",
     "bar"

docs/nitro.config.ts

@@ -1,4 +1,5 @@
-import { defineNitroConfig } from "nitropack";
+import copy from 'rollup-plugin-copy';
+import replace from '@rollup/plugin-replace';
 
 export default defineNitroConfig({
   preset: 'vercel-edge',
@@ -6,15 +7,29 @@ export default defineNitroConfig({
   routeRules: {
     '/api/**': { cors: false },
   },
+  rollupConfig: {
+    external: ['@resvg/resvg-wasm/index_bg.wasm', './index_bg.wasm?module'],
+    plugins: [
+      copy({
+        targets: [
+          {
+            src: './node_modules/@resvg/resvg-wasm/index_bg.wasm',
+            dest: './.vercel/output/functions/__nitro.func',
+          },
+        ],
+      }),
+      replace({
+        include: ['./**/*.ts'],
+        '/* WASM_IMPORT */': 'import resvg_wasm from "./index_bg.wasm?module";',
+        delimiters: ['', ''],
+        preventAssignment: false,
+      }),
+    ],
+  },
   esbuild: {
     options: {
-      include: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.json'],
-      loaders: {
-        '.js': 'js',
-        '.jsx': 'jsx',
-        '.ts': 'ts',
-        '.tsx': 'tsx',
-      }
+      jsxFactory: 'React.createElement',
+      jsxFragment: 'React.Fragment',
     },
   },
-})
+});

docs/package.json

@@ -24,14 +24,17 @@
   "author": "Eric Fennis",
   "license": "ISC",
   "devDependencies": {
-    "h3": "^1.7.1",
-    "nitropack": "2.4.1",
+    "@rollup/plugin-replace": "^5.0.2",
+    "h3": "^1.8.0",
+    "nitropack": "npm:nitropack-edge@latest",
     "node-fetch": "2",
+    "rollup-plugin-copy": "^3.4.0",
     "vitepress": "1.0.0-rc.4"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
     "@headlessui/vue": "^1.7.13",
+    "@resvg/resvg-wasm": "^2.4.1",
     "@vueuse/components": "^10.1.0",
     "@vueuse/core": "^10.1.0",
     "element-to-path": "^1.2.1",

icons/archive-restore.json

@@ -5,11 +5,12 @@
     "ericfennis"
   ],
   "tags": [
-    "archive",
     "unarchive",
-    "restore",
     "index",
-    "box"
+    "backup",
+    "box",
+    "storage",
+    "records"
   ],
   "categories": [
     "files",

icons/archive-restore.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="20" height="5" x="2" y="4" rx="2" />
-  <path d="M12 13v7" />
-  <path d="m9 16 3-3 3 3" />
-  <path d="M4 9v9a2 2 0 0 0 2 2h2" />
-  <path d="M20 9v9a2 2 0 0 1-2 2h-2" />
+  <rect width="20" height="5" x="2" y="3" rx="1" />
+  <path d="M4 8v11a2 2 0 0 0 2 2h2" />
+  <path d="M20 8v11a2 2 0 0 1-2 2h-2" />
+  <path d="m9 15 3-3 3 3" />
+  <path d="M12 12v9" />
 </svg>

icons/archive-x.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "index",
+    "backup",
+    "box",
+    "storage",
+    "records",
+    "junk"
+  ],
+  "categories": [
+    "files",
+    "mail"
+  ]
+}

icons/archive-x.svg

@@ -0,0 +1,16 @@
+<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 width="20" height="5" x="2" y="3" rx="1" />
+  <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+  <path d="m9.5 17 5-5" />
+  <path d="m9.5 12 5 5" />
+</svg>

icons/archive.json

@@ -7,7 +7,10 @@
   ],
   "tags": [
     "index",
-    "box"
+    "backup",
+    "box",
+    "storage",
+    "records"
   ],
   "categories": [
     "files",

icons/archive.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="20" height="5" x="2" y="4" rx="2" />
-  <path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9" />
-  <path d="M10 13h4" />
+  <rect width="20" height="5" x="2" y="3" rx="1" />
+  <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+  <path d="M10 12h4" />
 </svg>

icons/box.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-  <polyline points="3.29 7 12 12 20.71 7" />
-  <line x1="12" x2="12" y1="22" y2="12" />
+  <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
+  <path d="m3.3 7 8.7 5 8.7-5" />
+  <path d="M12 22V12" />
 </svg>

icons/bug-off.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "debug",
+    "code",
+    "insect",
+    "kill",
+    "exterminate",
+    "pest control"
+  ],
+  "categories": [
+    "development",
+    "animals"
+  ]
+}

icons/bug-off.svg

@@ -0,0 +1,21 @@
+<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="M15 7.13V6a3 3 0 0 0-5.14-2.1L8 2" />
+  <path d="M14.12 3.88 16 2" />
+  <path d="M22 13h-4v-2a4 4 0 0 0-4-4h-1.3" />
+  <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+  <path d="m2 2 20 20" />
+  <path d="M7.7 7.7A4 4 0 0 0 6 11v3a6 6 0 0 0 11.13 3.13" />
+  <path d="M12 20v-8" />
+  <path d="M6 13H2" />
+  <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+</svg>

icons/bug-play.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "debug",
+    "code",
+    "insect"
+  ],
+  "categories": [
+    "development",
+    "animals"
+  ]
+}

icons/bug-play.svg

@@ -0,0 +1,21 @@
+<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="m8 2 1.88 1.88" />
+  <path d="M14.12 3.88 16 2" />
+  <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+  <path d="M18 11a4 4 0 0 0-4-4h-4a4 4 0 0 0-4 4v3a6.1 6.1 0 0 0 2 4.5" />
+  <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
+  <path d="M6 13H2" />
+  <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+  <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+  <path d="m12 12 8 5-8 5Z" />
+</svg>

icons/bug.json

@@ -1,15 +1,17 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "ericfennis",
-    "mittalyashu"
+    "danielbayley"
   ],
   "tags": [
     "issue",
     "report",
+    "debug",
+    "code",
     "insect"
   ],
   "categories": [
-    "development"
+    "development",
+    "animals"
   ]
 }

icons/bug.svg

@@ -9,13 +9,15 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="8" height="14" x="8" y="6" rx="4" />
-  <path d="m19 7-3 2" />
-  <path d="m5 7 3 2" />
-  <path d="m19 19-3-2" />
-  <path d="m5 19 3-2" />
-  <path d="M20 13h-4" />
-  <path d="M4 13h4" />
-  <path d="m10 4 1 2" />
-  <path d="m14 4-1 2" />
+  <path d="m8 2 1.88 1.88" />
+  <path d="M14.12 3.88 16 2" />
+  <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+  <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" />
+  <path d="M12 20v-9" />
+  <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
+  <path d="M6 13H2" />
+  <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+  <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+  <path d="M22 13h-4" />
+  <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" />
 </svg>

icons/package-check.svg

@@ -11,7 +11,7 @@
 >
   <path d="m16 16 2 2 4-4" />
   <path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14" />
-  <path d="M16.5 9.4 7.55 4.24" />
+  <path d="m7.5 4.27 9 5.15" />
   <polyline points="3.29 7 12 12 20.71 7" />
   <line x1="12" x2="12" y1="22" y2="12" />
 </svg>

icons/package-minus.svg

@@ -11,7 +11,7 @@
 >
   <path d="M16 16h6" />
   <path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14" />
-  <path d="M16.5 9.4 7.55 4.24" />
+  <path d="m7.5 4.27 9 5.15" />
   <polyline points="3.29 7 12 12 20.71 7" />
   <line x1="12" x2="12" y1="22" y2="12" />
 </svg>

icons/package-plus.svg

@@ -12,7 +12,7 @@
   <path d="M16 16h6" />
   <path d="M19 13v6" />
   <path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14" />
-  <path d="M16.5 9.4 7.55 4.24" />
+  <path d="m7.5 4.27 9 5.15" />
   <polyline points="3.29 7 12 12 20.71 7" />
   <line x1="12" x2="12" y1="22" y2="12" />
 </svg>

icons/package-search.svg

@@ -10,7 +10,7 @@
   stroke-linejoin="round"
 >
   <path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14" />
-  <path d="M16.5 9.4 7.55 4.24" />
+  <path d="m7.5 4.27 9 5.15" />
   <polyline points="3.29 7 12 12 20.71 7" />
   <line x1="12" x2="12" y1="22" y2="12" />
   <circle cx="18.5" cy="15.5" r="2.5" />

icons/package-x.svg

@@ -10,7 +10,7 @@
   stroke-linejoin="round"
 >
   <path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14" />
-  <path d="M16.5 9.4 7.55 4.24" />
+  <path d="m7.5 4.27 9 5.15" />
   <polyline points="3.29 7 12 12 20.71 7" />
   <line x1="12" x2="12" y1="22" y2="12" />
   <path d="m17 13 5 5m-5 0 5-5" />

icons/package.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M16.5 9.4 7.55 4.24" />
-  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-  <polyline points="3.29 7 12 12 20.71 7" />
-  <line x1="12" x2="12" y1="22" y2="12" />
+  <path d="m7.5 4.27 9 5.15" />
+  <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
+  <path d="m3.3 7 8.7 5 8.7-5" />
+  <path d="M12 22V12" />
 </svg>

icons/party-popper.json

@@ -7,9 +7,16 @@
     "emoji",
     "congratulations",
     "celebration",
-    "party"
+    "party",
+    "tada",
+    "🎉",
+    "🎊",
+    "excitement",
+    "exciting",
+    "excites",
+    "confetti"
   ],
   "categories": [
     "emoji"
   ]
-}
+}

icons/russian-ruble.svg

@@ -9,9 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M14 11c5.333 0 5.333-8 0-8" />
-  <path d="M6 11h8" />
+  <path d="M6 11h8a4 4 0 0 0 0-8H9v18" />
   <path d="M6 15h8" />
-  <path d="M9 21V3" />
-  <path d="M9 3h5" />
 </svg>

icons/send-horizontal.json

@@ -15,5 +15,8 @@
     "mail",
     "communication",
     "connectivity"
+  ],
+  "aliases": [
+    "send-horizonal"
   ]
 }

packages/lucide-angular/src/lib/lucide-icon.provider.ts

@@ -6,7 +6,12 @@ export interface LucideIconProviderInterface {
     getIcon(name: string): LucideIconData|null;
 }
 
-export const LUCIDE_ICONS = new InjectionToken<LucideIconProviderInterface>('LucideIcons');
+export const LUCIDE_ICONS = new InjectionToken<LucideIconProviderInterface>(
+  'LucideIcons',
+  {
+    factory: () => new LucideIconProvider({})
+  }
+);
 
 export class LucideIconProvider implements LucideIconProviderInterface {
     constructor(private icons: LucideIcons) {

packages/lucide-react-native/src/createLucideIcon.ts

@@ -1,7 +1,7 @@
 import { forwardRef, createElement, ReactSVG, ReactNode, FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import * as NativeSvg from 'react-native-svg';
-import defaultAttributes from './defaultAttributes';
+import defaultAttributes, { childDefaultAttributes } from './defaultAttributes';
 import type { SvgProps } from 'react-native-svg';
 type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
 
@@ -9,32 +9,44 @@ type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
 export interface LucideProps extends SvgProps {
   size?: string | number
   absoluteStrokeWidth?: boolean
+  'data-testid'?: string
 }
 
 const createLucideIcon = (iconName: string, iconNode: IconNode) => {
   const Component = forwardRef(
-    ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }: LucideProps, ref) =>
-      createElement(
+    ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, 'data-testid': dataTestId, ...rest }: LucideProps, ref) => {
+      const customAttrs = {
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
+        ...rest,
+      };
+
+      return createElement(
         NativeSvg.Svg as unknown as string,
         {
           ref,
           ...defaultAttributes,
           width: size,
           height: size,
-          stroke: color,
-          strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-          ...rest,
+          'data-testid': dataTestId,
+          ...customAttrs,
         },
         [
           ...iconNode.map(([tag, attrs]) => {
-            const upperCasedTag = (tag.charAt(0).toUpperCase() + tag.slice(1)) as keyof (typeof NativeSvg);
-            return createElement(NativeSvg[upperCasedTag] as FunctionComponent<Record<string, string>>, attrs);
+            const upperCasedTag = (tag.charAt(0).toUpperCase() +
+              tag.slice(1)) as keyof typeof NativeSvg;
+            // duplicating the attributes here because generating the OTA update bundles don't inherit the SVG properties from parent (codepush, expo-updates)
+            return createElement(
+              NativeSvg[upperCasedTag] as FunctionComponent<Record<string, string>>,
+              { ...childDefaultAttributes, ...customAttrs, ...attrs },
+            );
           }),
           ...(
             (Array.isArray(children) ? children : [children]) || []
           ),
         ],
-      ),
+      );
+    }
   );
 
   Component.propTypes = {

packages/lucide-react-native/src/defaultAttributes.ts

@@ -1,4 +1,4 @@
-export default {
+const defaultAttributes = {
   xmlns: 'http://www.w3.org/2000/svg',
   width: 24,
   height: 24,
@@ -9,3 +9,13 @@ export default {
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
 };
+
+export const childDefaultAttributes = {
+  fill: defaultAttributes.fill,
+  stroke: defaultAttributes.stroke,
+  strokeWidth: defaultAttributes.strokeWidth,
+  strokeLinecap: defaultAttributes.strokeLinecap,
+  strokeLinejoin: defaultAttributes.strokeLinejoin,
+};
+
+export default defaultAttributes;

packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap

@@ -1,11 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-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 width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></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\\" data-testid=\\"grid-icon\\"><rect fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg>"`;
 
-exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+exports[`Using lucide icon components > should duplicate properties to children components 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"multiple-children\\"><rect fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></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 width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg>"`;
 
-exports[`Using lucide icon components > should work with a single child 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\\" data-testid=\\"single-child\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path><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\\" data-testid=\\"child\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg></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 fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg>"`;
 
-exports[`Using lucide icon components > should work with several children components 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\\" data-testid=\\"multiple-children\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path><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\\" data-testid=\\"child1\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg><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\\" data-testid=\\"child2\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg></svg>"`;
+exports[`Using lucide icon components > should work with a single child 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\\" data-testid=\\"single-child\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path><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\\" data-testid=\\"child\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg></svg>"`;
+
+exports[`Using lucide icon components > should work with several children components 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\\" data-testid=\\"multiple-children\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path><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\\" data-testid=\\"child1\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg><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\\" data-testid=\\"child2\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg></svg>"`;

packages/lucide-react-native/tests/lucide-react-native.spec.tsx

@@ -116,4 +116,25 @@ describe('Using lucide icon components', () => {
     expect(child2).toEqual(getByTestId(childId2));
     expect(container.innerHTML).toMatchSnapshot();
   })
+
+  it('should duplicate properties to children components', () => {
+    const testId = 'multiple-children';
+
+    const fill = 'red';
+    const color = 'white';
+    const strokeWidth = 10;
+
+    const { container, getByTestId } = render(
+      <Grid data-testid={testId} fill={fill} color={color} strokeWidth={strokeWidth} />
+    );
+    const { children = [] } = getByTestId(testId) as unknown as { children: HTMLCollection };
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      expect(child.getAttribute('fill')).toBe(fill);
+      expect(child.getAttribute('stroke')).toBe(color);
+      expect(child.getAttribute('stroke-width')).toBe(`${strokeWidth}`);
+    }
+
+    expect(container.innerHTML).toMatchSnapshot();
+  })
 })

packages/lucide-svelte/package.json

@@ -11,11 +11,23 @@
     "directory": "packages/lucide-svelte"
   },
   "author": "Eric Fennis",
-  "amdName": "lucide-svelte",
   "type": "module",
   "main": "dist/esm/lucide-svelte.js",
-  "module": "dist/esm/lucide-svelte.js",
-  "svelte": "dist/svelte/lucide-svelte.js",
+  "exports": {
+    ".": {
+      "default": "./dist/esm/lucide-svelte.js",
+      "svelte": "./dist/svelte/lucide-svelte.js",
+      "types": "./dist/lucide-svelte.d.ts"
+    },
+    "./icons": {
+      "default": "./dist/esm/icons/index.js",
+      "svelte": "./dist/svelte/icons/index.js"
+    },
+    "./icons/*": {
+      "default": "./dist/esm/icons/*.js",
+      "svelte": "./dist/svelte/icons/*.svelte"
+    }
+  },
   "typings": "dist/lucide-svelte.d.ts",
   "sideEffects": false,
   "files": [

packages/lucide-svelte/rollup.config.mjs

@@ -15,6 +15,7 @@ const bundles = [
     inputs,
     outputDir,
     preserveModules: true,
+    preserveModulesRoot: 'src',
   },
   {
     format: 'svelte',
@@ -25,7 +26,7 @@ const bundles = [
 ];
 
 const configs = bundles
-  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
+  .map(({ inputs, outputDir, format, minify, preserveModules, preserveModulesRoot }) =>
     inputs.map(input => ({
       input,
       plugins: [
@@ -35,7 +36,7 @@ const configs = bundles
             include: 'src/**/*.svelte',
             compilerOptions: {
               dev: false,
-              css: false,
+              css: 'external',
               hydratable: true,
             },
             emitCss: false,
@@ -59,11 +60,22 @@ const configs = bundles
               file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
             }),
         preserveModules,
+        preserveModulesRoot,
         format: format === 'svelte' ? 'esm' : format,
         sourcemap: true,
         globals: {
           svelte: 'svelte',
         },
+        entryFileNames: (chunkInfo) => {
+          if (chunkInfo.name.includes('node_modules')) {
+            const [pathToReplace, directory] = chunkInfo.name.match(/.*\/([^\/]+)\//);
+            const fileName = chunkInfo.name.replace(pathToReplace, '');
+
+            return `external/${directory}/${fileName}.js`;
+          }
+
+          return '[name].js';
+        }
       },
     })),
   )

packages/lucide-svelte/scripts/buildTypes.mjs

@@ -18,7 +18,7 @@ const writeDeclarationFile = (typesFile, directory, content) => {
 };
 
 const getComponentImport = (componentName) =>
-  `export declare class ${componentName} extends SvelteComponentTyped<IconProps, IconEvents, {}> {}\n`;
+  `export declare class ${componentName} extends SvelteComponent<IconProps, IconEvents, {}> {}\n`;
 
 const ICONS_DIR = path.resolve(currentDir, '../../../icons');
 const TYPES_FILE = 'lucide-svelte.d.ts';
@@ -27,7 +27,7 @@ const TYPES_FILE = 'lucide-svelte.d.ts';
 let declarationFileContent = `\
 /// <reference types="svelte" />
 /// <reference types="svelte-check/dist/src/svelte-jsx" />
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 
 interface IconProps extends Partial<svelte.JSX.SVGProps<SVGSVGElement>> {
   color?: string
@@ -41,7 +41,7 @@ interface IconEvents {
   [evt: string]: CustomEvent<any>;
 }
 
-export type Icon = SvelteComponentTyped<IconProps, IconEvents, {}>
+export type Icon = SvelteComponent<IconProps, IconEvents, {}>
 
 // Generated icons
 `;