Merge branch 'main' into piano

.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/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