Add theater/drama icons (#1474)

* Add theater/drama icons

Related to #1399

Co-Authored-By: Daniel Bayley <daniel.bayley@me.com>

* Remove alternate drama icon

* Improve tags

---------

Co-authored-by: Daniel Bayley <daniel.bayley@me.com>

.github/workflows/lucide-font.yml

@@ -10,7 +10,6 @@ on:
 jobs:
   lucide-font:
     runs-on: ubuntu-latest
-    container: ericfennis/lucide-font:latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3.4.1
@@ -43,11 +42,11 @@ jobs:
       - name: Outline svg Icons
         run: pnpm build:outline-icons
 
-      - name: Create directory
-        run: mkdir lucide-font
+      - name: Install dependencies
+        run: pnpm install --filter build-font
 
-      - name: Build font
-        run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
+      - name: Create font in ./lucide-font
+        run: pnpm build:font
 
       - name: "Upload to Artifacts"
         uses: actions/upload-artifact@v1

.github/workflows/lucide-react.yml

@@ -5,6 +5,7 @@ on:
     paths:
       - packages/lucide-react/**
       - tools/build-icons/**
+      - scripts/generateNextJSAliases.mjs
       - pnpm-lock.yaml
 
 jobs:

README.md

@@ -285,6 +285,9 @@ Thank you to all the people who contributed to Lucide!
 
 ## Sponsors
 
+
 <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
-  <img src="/docs/public/vercel.svg" alt="Powered by Vercel" width="200" />
+  <img src="docs/public/vercel.svg" alt="Powered by Vercel" width="200" />
 </a>
+
+<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="docs/public/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>

docs/.vitepress/config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
   description,
   cleanUrls: true,
   outDir: '.vercel/output/static',
+  srcExclude: ['**/README.md'],
   vite: {
     resolve: {
       alias: [

docs/.vitepress/lib/createCodeExamples.ts

@@ -24,7 +24,7 @@ const getIconCodes = (): CodeExampleType => {
       codes: [
         {
           language: 'html',
-          code: `<i data-lucide-name="Name"></i>
+          code: `<i data-lucide="Name"></i>
 `,
         },
       ],

docs/.vitepress/theme/components/overrides/VPFooter.vue

@@ -36,15 +36,22 @@ const links = computed(() => [
 <template>
   <footer v-if="theme.footer" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
     <div class="container">
-      <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
-      <p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
+      <div class="sponsors">
+        <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss" rel="noreferrer noopener">
+          <img src="/vercel.svg" alt="Powered by Vercel" width="200" />
+        </a>
+        <a href="https://vercel.com?utm_source=lucide&utm_medium=referral&utm_campaign=oss">
+          <img src="/digitalocean.svg" alt="Digital Ocean" width="200" />
+        </a>
+      </div>
       <div class="links">
         <VPLink v-for="link in links" :href="link.href" :key="link.text" :rel="link.href.startsWith('http') ? 'noreferrer noopener': undefined">
           {{ link.text }}
         </VPLink>
-        <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss" rel="noreferrer noopener">
-          <img src="/vercel.svg" alt="Powered by Vercel" width="200" />
-        </a>
+      </div>
+      <div>
+        <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
+        <p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
       </div>
     </div>
   </footer>
@@ -67,7 +74,7 @@ const links = computed(() => [
 
 .container {
   margin: 0 auto;
-  max-width: var(--vp-layout-max-width);
+  max-width: calc(var(--vp-layout-max-width) - 64px);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -85,7 +92,7 @@ const links = computed(() => [
 .message   { order: 2; }
 .copyright { order: 1; }
 
-.links {
+.links, .sponsors {
   display: flex;
   gap: 32px;
   align-items: center;
@@ -102,7 +109,7 @@ const links = computed(() => [
     flex-direction: row-reverse;
   }
   .links {
-    margin-left: auto;
+    margin-right: auto;
   }
 }
 </style>

docs/README.md

@@ -3,8 +3,6 @@
 The Lucide docs website is built with Vitepress: https://vitepress.dev/
 This is Markdown-based documentation powered by Vue.
 
-This is why this file is in txt format.
-
 ## Development
 
 ```sh

docs/guide/packages/lucide-preact.md

@@ -26,9 +26,9 @@ npm install lucide-preact
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Preact component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Preact component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -56,7 +56,7 @@ export default App;
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```jsx
 // Usage
@@ -69,10 +69,10 @@ const App = () => {
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-react-native.md

@@ -52,7 +52,7 @@ export default App;
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component.
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements.
 
 ```jsx
 // Usage
@@ -63,10 +63,10 @@ const App = () => {
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: warning
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important  to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-react.md

@@ -22,9 +22,9 @@ npm install lucide-react
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a React component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -52,7 +52,7 @@ export default App;
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```jsx
 // Usage
@@ -63,10 +63,10 @@ const App = () => {
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 
 This is not the case for the latest NextJS, because it uses server side rendering. The icons will be streamed to the client when needed. For NextJS with Dynamic Imports, see [dynamic imports](#nextjs-example) section for more information.
 :::
@@ -101,7 +101,7 @@ export default App;
 
 > :warning: This is experimental and only works with bundlers that support dynamic imports.
 
-Lucide react exports a dynamic import map `dynamicIconImports`. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database.
+Lucide react exports a dynamic import map `dynamicIconImports`, which is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system with where icon names are stored in a database.
 
 When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
 

docs/guide/packages/lucide-solid.md

@@ -22,9 +22,9 @@ npm install lucide-solid
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Solid component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Solid component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -52,7 +52,7 @@ export default App;
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```jsx
 // Usage
@@ -66,7 +66,7 @@ const App = () => {
 It is possible to create one generic icon component to load icons. It's not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important  to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-svelte.md

@@ -22,9 +22,9 @@ npm install lucide-svelte
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Svelte component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Svelte component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -59,7 +59,7 @@ Additional props can be passed to adjust the icon:
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```svelte
 <script>
@@ -73,10 +73,10 @@ This results a filled phone icon.
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-vue-next.md

@@ -28,9 +28,9 @@ npm install lucide-vue-next
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Vue component, which renders an inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -61,7 +61,7 @@ import { Camera } from 'lucide-vue-next';
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```vue
 <template>
@@ -71,10 +71,10 @@ To apply custom props to change the look of the icon, this can be done by simply
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

docs/guide/packages/lucide-vue.md

@@ -28,9 +28,9 @@ npm install lucide-vue
 
 ## How to use
 
-It's build with ES Modules so it's completely tree-shakable.
+Lucide is built with ES Modules, so it's completely tree-shakable.
 
-Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+Each icon can be imported as a Vue component, which renders an inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
@@ -63,7 +63,7 @@ Additional props can be passed to adjust the icon:
 
 ### Applying props
 
-To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
 ```vue
 <template>
@@ -73,10 +73,10 @@ To apply custom props to change the look of the icon, this can be done by simply
 
 ## One generic icon component
 
-It is possible to create one generic icon component to load icons. It's not recommended.
+It is possible to create one generic icon component to load icons, but it is not recommended.
 
 ::: danger
-Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
 :::
 
 ### Icon Component Example

icons/arrow-down-0-1.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-01"
   ]
 }

icons/arrow-down-1-0.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-10"
   ]
 }

icons/arrow-down-a-z.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-az"
   ]
 }

icons/arrow-down-z-a.json

@@ -14,5 +14,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-za"
   ]
 }

icons/arrow-up-0-1.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-01"
   ]
 }

icons/arrow-up-1-0.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-10"
   ]
 }

icons/arrow-up-a-z.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-az"
   ]
 }

icons/arrow-up-z-a.json

@@ -14,5 +14,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-za"
   ]
 }

icons/axis-3d.json

@@ -11,5 +11,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "axis-3-d"
   ]
 }

icons/badge-percent.json

@@ -8,12 +8,17 @@
     "verified",
     "unverified",
     "sale",
-    "marketing"
+    "discount",
+    "offer",
+    "marketing",
+    "sticker",
+    "price tag"
   ],
   "categories": [
     "account",
     "social",
     "money",
+    "shopping",
     "maths",
     "shapes"
   ]

icons/ban.json

@@ -3,7 +3,6 @@
   "contributors": [
     "danielbayley"
   ],
-  "aliases": ["slash"],
   "tags": [
     "cancel",
     "no",

icons/bookmark-check.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "read",
+    "finished",
+    "complete",
+    "clip",
+    "marker",
+    "tag",
+    "task",
+    "todo"
+  ],
+  "categories": [
+    "account"
+  ]
+}

icons/bookmark-check.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" />
+  <path d="m9 10 2 2 4-4" />
+</svg>

icons/bookmark-x.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "read",
+    "clip",
+    "marker",
+    "tag",
+    "cancel",
+    "close",
+    "delete",
+    "remove",
+    "clear"
+  ],
+  "categories": [
+    "account"
+  ]
+}

icons/bookmark-x.svg

@@ -0,0 +1,15 @@
+<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="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" />
+  <path d="m14.5 7.5-5 5" />
+  <path d="m9.5 7.5 5 5" />
+</svg>

icons/bot.json

@@ -1,7 +1,6 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "mittalyashu",
     "ericfennis"
   ],
   "tags": [
@@ -14,4 +13,4 @@
     "development",
     "social"
   ]
-}
+}

icons/bot.svg

@@ -9,9 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="10" x="3" y="11" rx="2" />
-  <circle cx="12" cy="5" r="2" />
-  <path d="M12 7v4" />
-  <line x1="8" x2="8" y1="16" y2="16" />
-  <line x1="16" x2="16" y1="16" y2="16" />
+  <path d="M12 8V4H8" />
+  <rect width="16" height="12" x="4" y="8" rx="2" />
+  <path d="M2 14h2" />
+  <path d="M20 14h2" />
+  <path d="M15 13v2" />
+  <path d="M9 13v2" />
 </svg>

icons/circle-slash-2.json

@@ -11,6 +11,11 @@
     "null",
     "void",
     "ban",
+    "maths",
+    "divide",
+    "division",
+    "half",
+    "split",
     "/"
   ],
   "categories": [

icons/circle-slash.json

@@ -21,9 +21,14 @@
     "mistake",
     "wrong",
     "failure",
+    "divide",
+    "division",
+    "or",
     "/"
   ],
   "categories": [
-    "shapes"
+    "shapes",
+    "development",
+    "maths"
   ]
 }

icons/clapperboard.json

@@ -2,15 +2,21 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "it-is-not",
-    "ericfennis"
+    "ericfennis",
+    "danielbayley"
   ],
   "tags": [
     "movie",
     "film",
     "video",
     "camera",
+    "cinema",
+    "cut",
+    "action",
+    "television",
     "tv",
-    "television"
+    "show",
+    "entertainment"
   ],
   "categories": [
     "multimedia"

icons/clapperboard.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8H4Z" />
-  <path d="m4 11-.88-2.87a2 2 0 0 1 1.33-2.5l11.48-3.5a2 2 0 0 1 2.5 1.32l.87 2.87L4 11.01Z" />
-  <path d="m6.6 4.99 3.38 4.2" />
-  <path d="m11.86 3.38 3.38 4.2" />
+  <path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" />
+  <path d="m6.2 5.3 3.1 3.9" />
+  <path d="m12.4 3.4 3.1 4" />
+  <path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
 </svg>

icons/copy-slash.json

@@ -18,10 +18,12 @@
     "divide",
     "division",
     "split",
+    "or",
     "/"
   ],
   "categories": [
     "text",
+    "development",
     "maths"
   ]
 }

icons/drama.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "../icon.schema.json",
+    "contributors": [
+        "danielbayley"
+    ],
+    "tags": [
+        "drama",
+        "masks",
+        "theater",
+        "theatre",
+        "entertainment",
+        "show"
+    ],
+    "categories": [
+        "multimedia"
+    ]
+}

icons/drama.svg

@@ -0,0 +1,20 @@
+<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="M 10 11h.01"/>
+  <path d="M 14 6h.01"/>
+  <path d="M 18 6h.01"/>
+  <path d="M 6.5 13.1h.01"/>
+  <path d="M22 5c0 9-4 12-6 12s-6-3-6-12c0-2 2-3 6-3s6 1 6 3"/>
+  <path d="M17.4 9.9c-.8.8-2 .8-2.8 0"/>
+  <path d="M10.1 7.1C9 7.2 7.7 7.7 6 8.6c-3.5 2-4.7 3.9-3.7 5.6 4.5 7.8 9.5 8.4 11.2 7.4.9-.5 1.9-2.1 1.9-4.7"/>
+  <path d="M9.1 16.5c.3-1.1 1.4-1.7 2.4-1.4"/>
+</svg>

icons/file-axis-3d.json

@@ -12,5 +12,8 @@
   "categories": [
     "design",
     "files"
+  ],
+  "aliases": [
+    "file-axis-3-d"
   ]
 }

icons/film.json

@@ -2,11 +2,16 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "colebemis",
-    "ericfennis"
+    "ericfennis",
+    "danielbayley"
   ],
   "tags": [
     "movie",
-    "video"
+    "video",
+    "reel",
+    "camera",
+    "cinema",
+    "entertainment"
   ],
   "categories": [
     "photography",

icons/film.svg

@@ -9,12 +9,12 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18" />
-  <line x1="7" x2="7" y1="2" y2="22" />
-  <line x1="17" x2="17" y1="2" y2="22" />
-  <line x1="2" x2="22" y1="12" y2="12" />
-  <line x1="2" x2="7" y1="7" y2="7" />
-  <line x1="2" x2="7" y1="17" y2="17" />
-  <line x1="17" x2="22" y1="17" y2="17" />
-  <line x1="17" x2="22" y1="7" y2="7" />
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="M7 3v18" />
+  <path d="M3 7.5h4" />
+  <path d="M3 12h18" />
+  <path d="M3 16.5h4" />
+  <path d="M17 3v18" />
+  <path d="M17 7.5h4" />
+  <path d="M17 16.5h4" />
 </svg>

icons/grid-2x2.json

@@ -26,5 +26,8 @@
     "design",
     "shapes",
     "maths"
+  ],
+  "aliases": [
+    "grid-2-x-2"
   ]
 }

icons/grid-3x3.json

@@ -18,6 +18,7 @@
     "design"
   ],
   "aliases": [
-    "grid"
+    "grid",
+    "grid-3-x-3"
   ]
 }

icons/move-3d.json

@@ -14,5 +14,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "move-3-d"
   ]
 }

icons/percent-circle.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "verified",
+    "unverified",
+    "sale",
+    "discount",
+    "offer",
+    "marketing",
+    "sticker",
+    "price tag"
+  ],
+  "categories": [
+    "account",
+    "social",
+    "money",
+    "shopping",
+    "maths",
+    "shapes"
+  ]
+}

icons/percent-circle.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"
+>
+  <circle cx="12" cy="12" r="10" />
+  <path d="m15 9-6 6" />
+  <path d="M9 9h.01" />
+  <path d="M15 15h.01" />
+</svg>

icons/percent-diamond.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "verified",
+    "unverified",
+    "sale",
+    "discount",
+    "offer",
+    "marketing",
+    "sticker",
+    "price tag"
+  ],
+  "categories": [
+    "account",
+    "social",
+    "money",
+    "shopping",
+    "maths",
+    "shapes"
+  ]
+}

icons/percent-diamond.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"
+>
+  <path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0Z" />
+  <path d="M9.2 9.2h.01" />
+  <path d="m14.5 9.5-5 5" />
+  <path d="M14.7 14.8h.01" />
+</svg>

icons/percent-square.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "verified",
+    "unverified",
+    "sale",
+    "discount",
+    "offer",
+    "marketing",
+    "sticker",
+    "price tag"
+  ],
+  "categories": [
+    "account",
+    "social",
+    "money",
+    "shopping",
+    "maths",
+    "shapes"
+  ]
+}

icons/percent-square.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="18" height="18" x="3" y="3" rx="2" />
+  <path d="m15 9-6 6" />
+  <path d="M9 9h.01" />
+  <path d="M15 15h.01" />
+</svg>

icons/percent.json

@@ -5,15 +5,20 @@
     "ericfennis"
   ],
   "tags": [
-    "discount",
     "percentage",
     "modulo",
     "modulus",
     "remainder",
-    "%"
+    "%",
+    "sale",
+    "discount",
+    "offer",
+    "marketing"
   ],
   "categories": [
     "maths",
-    "development"
+    "development",
+    "money",
+    "shopping"
   ]
 }

icons/rotate-3d.json

@@ -11,5 +11,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "rotate-3-d"
   ]
 }

icons/scale-3d.json

@@ -12,5 +12,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "scale-3-d"
   ]
 }

icons/slash.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "divide",
+    "division",
+    "or",
+    "/"
+  ],
+  "categories": [
+    "development",
+    "maths"
+  ]
+}

icons/slash.svg

@@ -0,0 +1,13 @@
+<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="M22 2 2 22" />
+</svg>

icons/speech.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "doerge",
+    "airone01",
+    "jguddas",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "disability",
+    "disabled",
+    "dda",
+    "human",
+    "accessibility",
+    "people",
+    "sound"
+  ],
+  "categories": [
+    "accessibility",
+    "communication"
+  ]
+}

icons/speech.svg

@@ -0,0 +1,15 @@
+<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.8 20v-4.1l1.9.2a2.3 2.3 0 0 0 2.164-2.1V8.3A5.37 5.37 0 0 0 2 8.25c0 2.8.656 3.054 1 4.55a5.77 5.77 0 0 1 .029 2.758L2 20" />
+  <path d="M19.8 17.8a7.5 7.5 0 0 0 .003-10.603" />
+  <path d="M17 15a3.5 3.5 0 0 0-.025-4.975" />
+</svg>

icons/square-slash.json

@@ -12,10 +12,12 @@
     "divide",
     "division",
     "shortcut",
-    "/"
+    "or",
+    "/"    
   ],
   "categories": [
     "shapes",
+    "development",
     "maths"
   ]
 }

icons/sun-moon.json

@@ -1,17 +1,23 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
+    "itsjavi",
     "mittalyashu",
     "karsa-mistmere"
   ],
   "tags": [
     "night",
+    "dark",
     "light",
     "moon",
     "sun",
-    "brightness"
+    "brightness",
+    "theme",
+    "auto theme",
+    "system theme",
+    "appearance"
   ],
   "categories": [
     "accessibility"
   ]
-}
+}

icons/sun-moon.svg

@@ -9,14 +9,13 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="12" cy="12" r="4" />
-  <path d="M12 8a2 2 0 1 0 4 4" />
+  <path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4" />
   <path d="M12 2v2" />
   <path d="M12 20v2" />
-  <path d="m4.93 4.93 1.41 1.41" />
-  <path d="m17.66 17.66 1.41 1.41" />
+  <path d="m4.9 4.9 1.4 1.4" />
+  <path d="m17.7 17.7 1.4 1.4" />
   <path d="M2 12h2" />
   <path d="M20 12h2" />
-  <path d="m6.34 17.66-1.41 1.41" />
-  <path d="m19.07 4.93-1.41 1.41" />
+  <path d="m6.3 17.7-1.4 1.4" />
+  <path d="m19.1 4.9-1.4 1.4" />
 </svg>

icons/theater.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "../icon.schema.json",
+    "contributors": [
+        "danielbayley"
+    ],
+    "tags": [
+        "theater",
+        "theatre",
+        "entertainment",
+        "podium",
+        "stage",
+        "musical"
+    ],
+    "categories": [
+        "buildings",
+        "social"
+    ]
+}

icons/theater.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="M2 10s3-3 3-8"/>
+  <path d="M22 10s-3-3-3-8"/>
+  <path d="M10 2c0 4.4-3.6 8-8 8"/>
+  <path d="M14 2c0 4.4 3.6 8 8 8"/>
+  <path d="M2 10s2 2 2 5"/>
+  <path d="M22 10s-2 2-2 5"/>
+  <path d="M8 15h8"/>
+  <path d="M2 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1"/>
+  <path d="M14 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1"/>
+</svg>

package.json

@@ -16,6 +16,7 @@
     "lucide-static": "pnpm --filter lucide-static",
     "build:icons": "node ./scripts/buildIcons.mjs --templateSrc ./packages/lucide/scripts/exportTemplate.mjs",
     "build:outline-icons": "pnpm --filter outline-svg start",
+    "build:font": "pnpm --filter docs prebuild:releaseJson && pnpm --filter build-font start",
     "generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
     "optimize": "node ./scripts/optimizeSvgs.mjs",
     "addjsons": "node scripts/addMissingIconJsonFiles.mjs",
@@ -26,6 +27,7 @@
     "categories2icons": "node scripts/migrateCategoriesToIcons.mjs --presets @babel/env",
     "generate:changelog": "node ./scripts/generateChangelog.mjs",
     "generate:contributors": "node ./scripts/updateContributors.mjs icons/*.svg",
+    "generate:nextJSAliases": "node ./scripts/generateNextJSAliases.mjs",
     "postinstall": "husky install",
     "lint": "eslint --ext .ts,.js,.mjs ./{packages/lucide,scripts}",
     "prepare": "husky install",
@@ -50,7 +52,10 @@
     "svgson": "^5.2.1"
   },
   "lint-staged": {
-    "icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
+    "icons/*.svg":[
+      "node ./scripts/optimizeStagedSvgs.mjs",
+      "node ./scripts/generateNextJSAliases.mjs"
+    ]
   },
   "packageManager": "pnpm@7.14.0",
   "pnpm": {

packages/lucide-svelte/package.json

@@ -15,17 +15,17 @@
   "main": "dist/esm/lucide-svelte.js",
   "exports": {
     ".": {
-      "default": "./dist/esm/lucide-svelte.js",
       "svelte": "./dist/svelte/lucide-svelte.js",
-      "types": "./dist/lucide-svelte.d.ts"
+      "types": "./dist/lucide-svelte.d.ts",
+      "default": "./dist/esm/lucide-svelte.js"
     },
     "./icons": {
-      "default": "./dist/esm/icons/index.js",
-      "svelte": "./dist/svelte/icons/index.js"
+      "svelte": "./dist/svelte/icons/index.js",
+      "default": "./dist/esm/icons/index.js"
     },
     "./icons/*": {
-      "default": "./dist/esm/icons/*.js",
-      "svelte": "./dist/svelte/icons/*.svelte"
+      "svelte": "./dist/svelte/icons/*.svelte",
+      "default": "./dist/esm/icons/*.js"
     }
   },
   "typings": "dist/lucide-svelte.d.ts",

scripts/generateNextJSAliases.mjs

@@ -0,0 +1,46 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { getCurrentDirPath, readSvgDirectory } from './helpers.mjs';
+
+// This is a special case convertion NextJS uses for their modularize imports. We try to follow the same convention, to generate the same imports.
+function pascalToKebabNextJSFlavour(str) {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    .replace(/([a-z])-?([0-9]+|[A-Z])/g, '$1-$2')
+    .replace(/([0-9]+)-?([a-zA-Z])/g, '$1-$2')
+    .replace(/([0-9])-([0-9])/g, '$1$2')
+    .split('-')
+    .map((word) => word.toLowerCase())
+    .join('-');
+}
+
+const currentDir = getCurrentDirPath(import.meta.url);
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+const iconNames = svgFiles.map((icon) => icon.split('.')[0]).reverse();
+
+console.log('Creating aliases for NextJS imports: ');
+
+Promise.all(
+  iconNames.map(async (iconName) => {
+    const pascalCaseName = iconName.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+
+    const iconNameKebabCaseNextjsFlavour = pascalToKebabNextJSFlavour(pascalCaseName);
+
+    if (iconName !== iconNameKebabCaseNextjsFlavour) {
+      console.log(iconName, '➡️', iconNameKebabCaseNextjsFlavour);
+
+      const metaJson = await fs.readFile(path.resolve(ICONS_DIR, `${iconName}.json`), 'utf-8');
+      const iconMetaData = JSON.parse(metaJson);
+
+      const aliases = iconMetaData.aliases ?? [];
+      aliases.push(iconNameKebabCaseNextjsFlavour);
+
+      const output = JSON.stringify({ ...iconMetaData, aliases }, null, 2);
+      fs.writeFile(path.resolve(ICONS_DIR, `${iconName}.json`), output, 'utf-8');
+    }
+  }),
+);

scripts/writeReleaseMetadata.mjs

@@ -1,8 +1,8 @@
 /* eslint-disable no-restricted-syntax,  no-await-in-loop */
-import { simpleGit } from 'simple-git';
-import semver from 'semver';
 import fs from 'fs';
 import path from 'path';
+import { simpleGit } from 'simple-git';
+import semver from 'semver';
 import { readSvgDirectory } from './helpers.mjs';
 
 const DATE_OF_FORK = '2020-06-08T16:39:52+0100';
@@ -15,6 +15,8 @@ const iconJsonFiles = readSvgDirectory(ICONS_DIR, '.json');
 const location = path.resolve(currentDir, '.vitepress/data', 'releaseMetaData.json');
 const releaseMetaDataDirectory = path.resolve(currentDir, '.vitepress/data', 'releaseMetadata');
 
+const allowedIconNameWithDoubleRelease = ['slash'];
+
 if (fs.existsSync(location)) {
   fs.unlinkSync(location);
 }
@@ -107,7 +109,10 @@ comparisons.forEach(({ tag, iconFiles, date } = {}) => {
     }
 
     if (status === 'A') {
-      if ('changedRelease' in newReleaseMetaData[iconName]) {
+      if (
+        'changedRelease' in newReleaseMetaData[iconName] &&
+        !allowedIconNameWithDoubleRelease.includes(iconName)
+      ) {
         throw new Error(`Icon '${iconName}' has already changedRelease set.`);
       }
 

tools/build-font/main.mjs

@@ -0,0 +1,124 @@
+import { readJson } from 'fs-extra/esm';
+import svgtofont from 'svgtofont';
+import getArgumentOptions from 'minimist';
+import path from 'path';
+
+const fontName = 'lucide';
+const classNamePrefix = 'icon';
+const startUnicode = 57400;
+
+const inputDir = path.join(process.cwd(), '../../', 'outlined');
+const cliArguments = getArgumentOptions(process.argv.slice(2));
+const { outputDir = 'lucide-font' } = cliArguments;
+const targetDir = path.join(process.cwd(), '../../', outputDir);
+const releaseMetaDataDir = path.join(process.cwd(), '../../', 'docs/.vitepress/data');
+const releaseMetaDataPath = path.resolve(releaseMetaDataDir, 'releaseMetaData.json');
+
+const releaseMetaData = convertReleaseMetaData(await getReleaseMetaData());
+
+async function getReleaseMetaData() {
+  let releaseMetaData = {};
+  try {
+    releaseMetaData = await readJson(releaseMetaDataPath);
+  } catch (err) {
+    throw new Error('Execution stopped because no release information was found.');
+  }
+  return releaseMetaData;
+}
+
+function convertReleaseMetaData(releaseMetaData) {
+  return Object.entries(releaseMetaData)
+    .map(([key, value]) => [key, addAttribute(value, 'name', key)])
+    .map(([, value]) => value)
+    .sort((a, b) => sortMultiple(a, b, [sortByCreatedReleaseDate, sortByName]))
+    .map((value, index) => addAttribute(value, 'index', index))
+    .map((value, index) => addAttribute(value, 'unicode', index + startUnicode));
+}
+
+function addAttribute(obj, attribute, value) {
+  obj[attribute] = value;
+  return obj;
+}
+
+function sortMultiple(a, b, collators = []) {
+  const comparison = collators.shift()(a, b);
+  if (comparison === 0 && collators.length > 0) return sortMultiple(a, b, collators);
+  return comparison;
+}
+
+function sortByCreatedReleaseDate(a, b) {
+  const dates = [a, b].map((value) => new Date(value.createdRelease.date).valueOf());
+  return (dates[0] > dates[1]) - (dates[0] < dates[1]);
+}
+
+function sortByName(a, b) {
+  return new Intl.Collator('en-US').compare(a.name, b.name);
+}
+
+function getIconUnicode(name) {
+  const { unicode } = releaseMetaData.find(({ name: iconname }) => iconname === name);
+  return String.fromCharCode(unicode);
+}
+
+async function init() {
+  console.time('Font generation');
+  try {
+    await svgtofont({
+      src: path.resolve(process.cwd(), inputDir),
+      dist: path.resolve(process.cwd(), targetDir),
+      // styleTemplates: path.resolve(process.cwd(), 'styles'), // Add different templates if needed
+      fontName,
+      classNamePrefix,
+      css: {
+        fontSize: 'inherit',
+      },
+      emptyDist: true,
+      useCSSVars: false,
+      outSVGReact: false,
+      outSVGPath: false,
+      svgicons2svgfont: {
+        fontHeight: 1000, // At least 1000 is recommended
+        normalize: false,
+      },
+      generateInfoData: true,
+      website: {
+        title: 'Lucide',
+        logo: null,
+        meta: {
+          description: 'Lucide icons as TTF/EOT/WOFF/WOFF2/SVG.',
+          keywords: 'Lucide,TTF,EOT,WOFF,WOFF2,SVG',
+        },
+        corners: {
+          url: 'https://github.com/lucide-icons/lucide',
+          width: 62, // default: 60
+          height: 62, // default: 60
+          bgColor: '#dc3545', // default: '#151513'
+        },
+        links: [
+          {
+            title: 'GitHub',
+            url: 'https://github.com/lucide-icons/lucide',
+          },
+          {
+            title: 'Feedback',
+            url: 'https://github.com/lucide-icons/lucide/issues',
+          },
+          {
+            title: 'Font Class',
+            url: 'index.html',
+          },
+          {
+            title: 'Unicode',
+            url: 'unicode.html',
+          },
+        ],
+      },
+      getIconUnicode,
+    });
+  } catch (err) {
+    console.log(err);
+  }
+  console.timeEnd('Font generation');
+}
+
+init();

tools/build-font/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "build-font",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node ./main.mjs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "fs-extra": "^11.1.1",
+    "minimist": "^1.2.8",
+    "svgtofont": "^3.25.4"
+  }
+}

tools/build-icons/building/generateAliasesFile.mjs

@@ -45,6 +45,11 @@ export default async function generateAliasesFile({
               await fs.promises.writeFile(location, output, 'utf-8');
             }
 
+            // Don't import the same icon twice
+            if (componentName === componentNameAlias) {
+              return;
+            }
+
             const exportFileIcon = separateAliasesFile ? alias : iconName;
 
             importString += getImportString(

tools/outline-svg/main.mjs

@@ -1,6 +1,5 @@
 import { promises as fs } from 'fs';
-import outlineStroke from 'svg-outline-stroke';
-import { parse, stringify } from 'svgson';
+import SVGFixer from 'oslllo-svg-fixer';
 import getArgumentOptions from 'minimist';
 import path from 'path';
 
@@ -9,31 +8,6 @@ const cliArguments = getArgumentOptions(process.argv.slice(2));
 const { outputDir = 'outlined' } = cliArguments;
 const targetDir = path.join(process.cwd(), '../../', outputDir);
 
-function transformForward(node) {
-  if (node.name === 'svg') {
-    return {
-      ...node,
-      attributes: {
-        ...node.attributes,
-        width: 960,
-        height: 960,
-      },
-    };
-  }
-  return node;
-}
-
-function transformBackwards(node) {
-  if (node.name === 'svg') {
-    const { width, height, ...attributes } = node.attributes;
-    return {
-      ...node,
-      attributes,
-    };
-  }
-  return node;
-}
-
 async function init() {
   console.time('icon outliner');
   try {
@@ -41,29 +15,10 @@ async function init() {
       await fs.mkdir(targetDir);
     } catch (error) {} // eslint-disable-line no-empty
 
-    const icons = (await fs.readdir(inputDir)).filter((file) => path.extname(file) === '.svg');
-    const parsedIconNodes = await Promise.all(
-      icons.map(async (file) => {
-        const inputFilePath = path.resolve(process.cwd(), inputDir, file);
-        const iconContent = await fs.readFile(inputFilePath);
-        const iconNode = await parse(iconContent.toString(), {
-          transformNode: transformForward,
-        });
-        return [file, iconNode];
-      }),
-    );
-
-    await Promise.all(
-      parsedIconNodes.map(async ([file, iconNode]) => {
-        const outlined = await outlineStroke(stringify(iconNode));
-        const outlinedWithoutAttrs = await parse(outlined, {
-          transformNode: transformBackwards,
-        });
-
-        const filePath = path.join(targetDir, file);
-        await fs.writeFile(filePath, stringify(outlinedWithoutAttrs));
-      }),
-    );
+    await SVGFixer(inputDir, targetDir, {
+      showProgressBar: true,
+      traceResolution: 800,
+    }).fix();
 
     console.timeEnd('icon outliner');
   } catch (err) {

tools/outline-svg/package.json

@@ -1,7 +1,7 @@
 {
   "name": "outline-svg",
   "private": true,
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,8 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "minimist": "^1.2.6",
-    "svg-outline-stroke": "^1.3.1",
-    "svgson": "^5.2.1"
+    "minimist": "^1.2.8",
+    "oslllo-svg-fixer": "^2.2.0"
   }
 }