fix typo in align-horizontal-distribute icon names (#534)

* Center tag icon

* Update icons/tag.svg

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

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

.github/workflows/release.yml

@@ -238,6 +238,41 @@ jobs:
           name: lucide-preact-package-json
           path: packages/lucide-preact/package.json
 
+  lucide-svelte:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Set Auth Token
+        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
+
+      - name: Set package.json version lucide
+        run: yarn workspace lucide-svelte version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+
+      - name: Build
+        run: yarn workspace lucide-svelte build
+
+      - name: Test
+        run: yarn workspace lucide-svelte test
+
+      - name: Publish
+        run: yarn workspace lucide-svelte publish
+
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          name: lucide-svelte-package-json
+          path: packages/lucide-svelte/package.json
+
   lucide-static:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
@@ -401,6 +436,7 @@ jobs:
         lucide-vue,
         lucide-vue-next,
         lucide-angular,
+        lucide-svelte,
         lucide-preact,
         lucide-flutter,
         lucide-font,
@@ -416,6 +452,7 @@ jobs:
           mv lucide-react-package-json/package.json packages/lucide-react/package.json
           mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
           mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
+          mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json
           mv lucide-vue-next-package-json/package.json packages/lucide-vue-next/package.json
           mv lucide-angular-package-json/package.json packages/lucide-angular/package.json
           mv lucide-flutter-pubspec-yaml/pubspec.yaml packages/lucide-flutter/pubspec.yaml

.github/workflows/test-lucide-svelte.yml

@@ -0,0 +1,36 @@
+name: Test Lucide Svelte
+
+on:
+  pull_request:
+    paths:
+      - packages/lucide-svelte/**
+  push:
+    paths:
+      - packages/lucide-svelte/**
+
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version
+        required: true
+
+jobs:
+  lucide-svelte:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Build
+        run: yarn workspace lucide-svelte build
+
+      - name: Test
+        run: yarn workspace lucide-svelte test
+

.github/workflows/test-lucide-vue-next.yml

@@ -0,0 +1,36 @@
+name: Test Lucide Vue Next
+
+on:
+  pull_request:
+    paths:
+      - packages/lucide-vue-next/**
+  push:
+    paths:
+      - packages/lucide-vue-next/**
+
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version
+        required: true
+
+jobs:
+  lucide-vue-next:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Build
+        run: yarn workspace lucide-vue-next build
+
+      - name: Test
+        run: yarn workspace lucide-vue-next test
+

.github/workflows/test-lucide-vue.yml

@@ -0,0 +1,36 @@
+name: Test Lucide Vue
+
+on:
+  pull_request:
+    paths:
+      - packages/lucide-vue/**
+  push:
+    paths:
+      - packages/lucide-vue/**
+
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version
+        required: true
+
+jobs:
+  lucide-vue:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Build
+        run: yarn workspace lucide-vue build
+
+      - name: Test
+        run: yarn workspace lucide-vue test
+

README.md

@@ -33,6 +33,7 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
   * [Vue 3](#vue-3)
   * [Angular](#angular)
   * [Preact](#preact)
+  * [Static](#static-svg-sprite-font-icons-)
   * [Figma](#figma)
   * [Laravel](#laravel)
   * [Flutter](#flutter)
@@ -129,6 +130,23 @@ npm install lucide-preact
 
 For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact#lucide-preact).
 
+### Static (svg sprite, font, icons ..)
+
+Assets:
+[Font Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
+[SVG Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
+[SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg)
+
+NPM package
+
+```sh
+yarn add lucide-static
+
+# or
+
+npm install lucide-static
+```
+
 ### Figma
 
 The lucide figma plugin.

docs/FIGMA_GUIDE.md

@@ -0,0 +1,7 @@
+---
+title: Figma Template Guide
+---
+
+# Figma Template Guide
+
+Please help us write this guide.

docs/ICON_DESIGN_GUIDE.md

@@ -1,4 +1,8 @@
-# Icon Design Guide
+---
+title: Icon Design Guide
+---
+
+# Icon Design Principles
 
 Here are rules that should be followed to keep quality and consistency when making icons for Lucide.
 

docs/ILLUSTRATOR_GUIDE.md

@@ -1,3 +1,6 @@
+---
+title: Illustrator Template Guide
+---
 
 # Illustrator Template Guide
 
@@ -25,4 +28,4 @@ The Illustrator template is created following guidelines from the [Icon Design G
 
 After that, double check that the [code conventions and SVG global attributes](https://github.com/lucide-icons/lucide/blob/master/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
 
-7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).
+7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).

docs/INKSCAPE_GUIDE.md

@@ -1,3 +1,7 @@
+---
+title: Icon Design Guide
+---
+
 # Inkscape Setup Guide
 
 This guide shows the steps to setup Inkscape for creating icons that conform to the Featherity design

docs/comparison.md

@@ -0,0 +1,25 @@
+---
+title: Comparison
+---
+
+# Comparison
+
+## Lucide vs Feather Icons
+
+Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather).
+
+It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned adn not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+
+Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers.
+
+### Why should I choose Lucide over Feather Icons?
+
+- Lucide already expended the icon set by 130+ in less then a year. Lucide has over 500+ icon, feather sticks around 286 icons.
+- Well maintained code base.
+- Active community.
+
+### Should I migrate to Lucide?
+
+That depends if you're fine with the icons from feather icons. If that is the case, it is maybe not the effort worth it.
+But if you keep wrestling and feel limited by the icons Feather provides you can consider to migrate.
+We didn't remove any icons when we forked, but there are some icons renamed.

docs/index.md

@@ -1,116 +1,23 @@
 ---
 title: Introduction
+nextPage:
+  - comparison
+  - installation
 ---
 
 # Introduction
 
-## What is Lucide?
+An open source icon library for displaying icons and symbols in digital and non digital projects. It is containing over 500+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
 
-Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
+Lucide contains icons with different variants and states. With that designers and developers can choose the right icon for them selves. If icons don't exist you're free to open design request. The Lucide community will help.
 
-It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+With help of the community, contributors are providing the library of new icons. With more icons, we simply have more icons to work with in your project. Also with rising of new applications with specific features lucide has the goal the provide the complete set for you project.
 
-Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
+When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
 
-### Why choose Lucide over Feather Icons
+Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for three-shaking abilities. With three-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
 
-- Lucide already expended the icon set by 130+ in less then a year, so more icons to work with.
-- Well maintained code base.
-- Active community.
+Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
 
-## Getting Started
-
-At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
-
-### Using Lucide packages
-
-### Web
-
-Implementation of the lucide icon library for web applications.
-
-```sh
-npm install lucide
-
-#or
-
-yarn add lucide
-```
-
-For more details, see the [documentation](lucide).
-
-### React
-
-Implementation of the lucide icon library for react applications.
-
-```sh
-yarn add lucide-react
-
-# or
-
-npm install lucide-react
-```
-
-For more details, see the [documentation](lucide-react).
-
-### Vue 2
-
-Implementation of the lucide icon library for vue applications.
-
-```sh
-yarn add lucide-vue
-
-# or
-
-npm install lucide-vue
-```
-
-For more details, see the [documentation](lucide-vue).
-
-### Vue 3
-
-Implementation of the lucide icon library for vue applications.
-
-```sh
-yarn add lucide-vue-next
-
-# or
-
-npm install lucide-vue-next
-```
-
-For more details, see the [documentation](lucide-vue-next).
-
-### Angular
-
-```sh
-yarn add lucide-angular
-
-# or
-
-npm install lucide-angular
-```
-
-For more details, see the [documentation](lucide-angular).
-
-### Preact
-
-Implementation of the lucide icon library for preact applications.
-
-```sh
-yarn add lucide-preact
-
-# or
-
-npm install lucide-preact
-```
-
-For more details, see the [documentation](lucide-preact).
-
-### Figma
-
-The lucide figma plugin.
-
-Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
-
-![Figma Lucide Cover](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
+Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
 

docs/installation.md

@@ -4,10 +4,126 @@ title: Installation
 
 # Installation
 
-Hello
+## Web
 
-> hello
+Implementation of the lucide icon library for web applications.
 
-```js
-console.log('asdadfasdf')
+```bash
+npm install lucide
+
+#or
+
+yarn add lucide
 ```
+
+For more details, see the [documentation](packages/lucide).
+
+## React
+
+Implementation of the lucide icon library for react applications.
+
+```bash
+yarn add lucide-react
+
+# or
+
+npm install lucide-react
+```
+
+For more details, see the [documentation](packages/lucide-react).
+
+## Vue 2
+
+Implementation of the lucide icon library for vue applications.
+
+```bash
+yarn add lucide-vue
+
+# or
+
+npm install lucide-vue
+```
+
+For more details, see the [documentation](packages/lucide-vue).
+
+## Vue 3
+
+Implementation of the lucide icon library for vue applications.
+
+```bash
+yarn add lucide-vue-next
+
+# or
+
+npm install lucide-vue-next
+```
+
+For more details, see the [documentation](packages/lucide-vue-next).
+
+## Svelte
+
+Implementation of the lucide icon library for vue applications.
+
+```bash
+yarn add lucide-svelte
+
+# or
+
+npm install lucide-svelte
+```
+
+For more details, see the [documentation](packages/lucide-svelte).
+
+## Angular
+
+```bash
+yarn add lucide-angular
+
+# or
+
+npm install lucide-angular
+```
+
+For more details, see the [documentation](packages/lucide-angular).
+
+## Preact
+
+Implementation of the lucide icon library for preact applications.
+
+```bash
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+For more details, see the [documentation](packages/lucide-preact).
+
+## Figma
+
+The lucide figma plugin.
+
+Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
+
+![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
+
+## Laravel
+
+Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
+
+```bash
+composer require mallardduck/blade-lucide-icons
+```
+
+For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
+
+## Flutter
+
+Implementation of Lucide icon library for Flutter applications.
+
+```bash
+flutter pub add lucide_icons
+```
+
+For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).

docs/packages/lucide-preact.md

@@ -62,7 +62,7 @@ const App = () => {
 
 It is possible to create one generic icon component to load icons.
 
-> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+> ⚠️ Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
 
 #### Icon Component Example
 

docs/packages/lucide-react.md

@@ -4,7 +4,7 @@ Implementation of the lucide icon library for react applications
 
 ## Installation
 
-```sh
+``` bash
 yarn add lucide-react
 
 # or

docs/packages/lucide-static.md

@@ -11,7 +11,7 @@ This package include the following lucide implementations:
 
 This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.
 
-> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](https://github.com/lucide-icons/lucide/tree/master/packages/lucide), [lucide-react](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react), [lucide-vue](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue), [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next), [lucide-angular](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular), [lucide-preact](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact)
+> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
 
 ## Installation
 

docs/packages/lucide-svelte.md

@@ -0,0 +1,89 @@
+# Lucide Svelte
+
+Implementation of the lucide icon library for svelte applications.
+
+## Installation
+
+```bash
+yarn add lucide-svelte
+
+# or
+
+npm install lucide-svelte
+```
+
+## How to use
+
+All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.
+
+### Example
+
+Default usage:
+
+```html
+<script>
+import { Skull } from 'lucide-svelte'
+</script>
+
+<Skull/>
+```
+
+You can pass additional props to adjust the icon.
+
+```html
+<script>
+import { Camera } from 'lucide-svelte'
+</script>
+
+<Camera />
+```
+
+### Available props
+
+|  name          |   type   |  default
+| -------------- | -------- | --------
+| `size`         | *Number* | 24
+| `color`        | *String* | currentColor
+| `strokeWidth`  | *Number* | 2
+| `*<SVGProps>`  | *String* | -
+
+\* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
+
+### Example of custom props
+
+```html
+<script>
+import { Phone } from 'lucide-svelte'
+</script>
+
+<Phone fill="#333"/>
+```
+
+This results a filled phone icon.
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you bundle your application,the build size will grow strongly. Because it will import all the icons.
+
+#### Icon Component Example
+
+``` html
+<script>
+  import * as icons from "lucide-svelte";
+  export let name;
+</script>
+
+<svelte:component this={icons[name]} {...$$props}/>
+```
+
+##### Then you can use it like this
+
+``` html
+<script>
+  import LucideIcon from "./LucideIcon";
+</script>
+
+<LucideIcon name="Menu" />
+```

docs/packages/lucide-vue-next.md

@@ -2,15 +2,19 @@
 
 Implementation of the lucide icon library for Vue 3 applications.
 
-> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue)
+> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](lucide-vue)
 
 ## Installation
 
-```sh
+**With yarn**
+
+```bash
 yarn add lucide-vue-next
+```
 
-# or
+**With npm**
 
+```bash
 npm install lucide-vue-next
 ```
 
@@ -23,7 +27,7 @@ Each icon can be imported as a vue component.
 
 You can pass additional props to adjust the icon.
 
-``` vue
+``` html
 <template>
   <Camera
     color="red"
@@ -56,7 +60,7 @@ export default {
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` vue
+``` html
 <template>
   <Camera fill="red" />
 </template>
@@ -66,11 +70,11 @@ You can also pass custom props that will be added in the svg as attributes.
 
 It is possible to create one generic icon component to load icons.
 
-> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
 
 #### Icon Component Example
 
-``` vue
+``` html
 <template>
   <component :is="icon" />
 </template>
@@ -85,18 +89,18 @@ export default {
       required: true,
     },
   },
-  computed: {
-    icon() {
-      return icons[this.name];
-    },
-  },
+  setup(props) {
+    const icon = computed(() => icons[props.name])
+
+    return { icon }
+  }
 };
 </script>
 ```
 
 ##### Then you can use it like this
 
-``` vue
+``` html
 <template>
   <div id="app">
     <Icon name="Airplay" />

docs/packages/lucide-vue.md

@@ -2,7 +2,7 @@
 
 Implementation of the lucide icon library for Vue applications.
 
-> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next)
+> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](lucide-vue-next)
 
 ## Installation
 
@@ -23,7 +23,7 @@ Each icon can be imported as a vue component.
 
 You can pass additional props to adjust the icon.
 
-``` vue
+``` html
 <template>
   <Camera
     color="red"
@@ -56,7 +56,7 @@ export default {
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` vue
+``` html
 <template>
   <Camera fill="red" />
 </template>
@@ -66,11 +66,11 @@ You can also pass custom props that will be added in the svg as attributes.
 
 It is possible to create one generic icon component to load icons.
 
-> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
 
 #### Icon Component Example
 
-``` vue
+``` html
 <template>
   <component :is="icon" />
 </template>
@@ -96,7 +96,7 @@ export default {
 
 ##### Then you can use it like this
 
-``` vue
+``` html
 <template>
   <div id="app">
     <Icon name="Airplay" />

icons/align-center-horizontal.svg

@@ -0,0 +1,17 @@
+<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 12h20" />
+  <path d="M10 16v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4" />
+  <path d="M10 8V4a2 2 0 00-2-2H6a2 2 0 00-2 2v4" />
+  <path d="M20 16v1a2 2 0 01-2 2h-2a2 2 0 01-2-2v-1" />
+  <path d="M14 8V7c0-1.1.9-2 2-2h2a2 2 0 012 2v1" />
+</svg>

icons/align-center-vertical.svg

@@ -0,0 +1,17 @@
+<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="M12 2v20" />
+  <path d="M8 10H4a2 2 0 01-2-2V6c0-1.1.9-2 2-2h4" />
+  <path d="M16 10h4a2 2 0 002-2V6a2 2 0 00-2-2h-4" />
+  <path d="M8 20H7a2 2 0 01-2-2v-2c0-1.1.9-2 2-2h1" />
+  <path d="M16 14h1a2 2 0 012 2v2a2 2 0 01-2 2h-1" />
+</svg>

icons/align-end-horizontal.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"
+>
+  <rect x="4" y="2" width="6" height="16" rx="2" />
+  <rect x="14" y="9" width="6" height="9" rx="2" />
+  <path d="M22 22H2" />
+</svg>

icons/align-end-vertical.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"
+>
+  <rect x="2" y="4" width="16" height="6" rx="2" />
+  <rect x="9" y="14" width="9" height="6" rx="2" />
+  <path d="M22 22V2" />
+</svg>

icons/align-horizontal-distribute-center.svg

@@ -0,0 +1,18 @@
+<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 x="4" y="5" width="6" height="14" rx="2" />
+  <rect x="14" y="7" width="6" height="10" rx="2" />
+  <path d="M17 22v-5" />
+  <path d="M17 7V2" />
+  <path d="M7 22v-3" />
+  <path d="M7 5V2" />
+</svg>

icons/align-horizontal-distribute-end.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 x="4" y="5" width="6" height="14" rx="2" />
+  <rect x="14" y="7" width="6" height="10" rx="2" />
+  <path d="M10 2v20" />
+  <path d="M20 2v20" />
+</svg>

icons/align-horizontal-distribute-start.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 x="4" y="5" width="6" height="14" rx="2" />
+  <rect x="14" y="7" width="6" height="10" rx="2" />
+  <path d="M4 2v20" />
+  <path d="M14 2v20" />
+</svg>

icons/align-horizontal-justify-center.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"
+>
+  <rect x="2" y="5" width="6" height="14" rx="2" />
+  <rect x="16" y="7" width="6" height="10" rx="2" />
+  <path d="M12 2v20" />
+</svg>

icons/align-horizontal-justify-end.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"
+>
+  <rect x="2" y="5" width="6" height="14" rx="2" />
+  <rect x="12" y="7" width="6" height="10" rx="2" />
+  <path d="M22 2v20" />
+</svg>

icons/align-horizontal-justify-start.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"
+>
+  <rect x="6" y="5" width="6" height="14" rx="2" />
+  <rect x="16" y="7" width="6" height="10" rx="2" />
+  <path d="M2 2v20" />
+</svg>

icons/align-horizontal-space-around.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"
+>
+  <rect x="9" y="7" width="6" height="10" rx="2" />
+  <path d="M4 22V2" />
+  <path d="M20 22V2" />
+</svg>

icons/align-horizontal-space-between.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 x="3" y="5" width="6" height="14" rx="2" />
+  <rect x="15" y="7" width="6" height="10" rx="2" />
+  <path d="M3 2v20" />
+  <path d="M21 2v20" />
+</svg>

icons/align-start-horizontal.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"
+>
+  <rect x="4" y="6" width="6" height="16" rx="2" />
+  <rect x="14" y="6" width="6" height="9" rx="2" />
+  <path d="M22 2H2" />
+</svg>

icons/align-start-vertical.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"
+>
+  <rect x="6" y="14" width="9" height="6" rx="2" />
+  <rect x="6" y="4" width="16" height="6" rx="2" />
+  <path d="M2 2v20" />
+</svg>

icons/align-vertical-distribute-center.svg

@@ -0,0 +1,18 @@
+<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 x="5" y="14" width="14" height="6" rx="2" />
+  <rect x="7" y="4" width="10" height="6" rx="2" />
+  <path d="M22 7h-5" />
+  <path d="M7 7H1" />
+  <path d="M22 17h-3" />
+  <path d="M5 17H2" />
+</svg>

icons/align-vertical-distribute-end.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 x="5" y="14" width="14" height="6" rx="2" />
+  <rect x="7" y="4" width="10" height="6" rx="2" />
+  <path d="M2 20h20" />
+  <path d="M2 10h20" />
+</svg>

icons/align-vertical-distribute-start.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 x="5" y="14" width="14" height="6" rx="2" />
+  <rect x="7" y="4" width="10" height="6" rx="2" />
+  <path d="M2 14h20" />
+  <path d="M2 4h20" />
+</svg>

icons/align-vertical-justify-center.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"
+>
+  <rect x="5" y="16" width="14" height="6" rx="2" />
+  <rect x="7" y="2" width="10" height="6" rx="2" />
+  <path d="M2 12h20" />
+</svg>

icons/align-vertical-justify-end.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"
+>
+  <rect x="5" y="12" width="14" height="6" rx="2" />
+  <rect x="7" y="2" width="10" height="6" rx="2" />
+  <path d="M2 22h20" />
+</svg>

icons/align-vertical-justify-start.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"
+>
+  <rect x="5" y="16" width="14" height="6" rx="2" />
+  <rect x="7" y="6" width="10" height="6" rx="2" />
+  <path d="M2 2h20" />
+</svg>

icons/align-vertical-space-around.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"
+>
+  <rect x="7" y="9" width="10" height="6" rx="2" />
+  <path d="M22 20H2" />
+  <path d="M22 4H2" />
+</svg>

icons/align-vertical-space-between.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 x="5" y="15" width="14" height="6" rx="2" />
+  <rect x="7" y="3" width="10" height="6" rx="2" />
+  <path d="M2 21h20" />
+  <path d="M2 3h20" />
+</svg>

icons/baseline.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="M4 20h16" />
+  <path d="M6 16l6-12 6 12" />
+  <path d="M8 12h8" />
+</svg>

icons/cookie.svg

@@ -0,0 +1,18 @@
+<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="M12 2a10 10 0 1010 10 4 4 0 01-5-5 4 4 0 01-5-5" />
+  <path d="M8.5 8.5v.01" />
+  <path d="M16 15.5v.01" />
+  <path d="M12 12v.01" />
+  <path d="M11 17v.01" />
+  <path d="M7 14v.01" />
+</svg>

icons/keyboard.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"
+>
+  <rect x="2" y="4" width="20" height="16" rx="2" ry="2" />
+  <path d="M6 8h.001" />
+  <path d="M10 8h.001" />
+  <path d="M14 8h.001" />
+  <path d="M18 8h.001" />
+  <path d="M8 12h.001" />
+  <path d="M12 12h.001" />
+  <path d="M16 12h.001" />
+  <path d="M7 16h10" />
+</svg>

icons/locate-off.svg

@@ -0,0 +1,19 @@
+<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"
+>
+  <line x1="2" x2="5" y1="12" y2="12" />
+  <line x1="19" x2="22" y1="12" y2="12" />
+  <line x1="12" x2="12" y1="2" y2="5" />
+  <line x1="12" x2="12" y1="19" y2="22" />
+  <path d="M7.11 7.11C5.83 8.39 5 10.1 5 12c0 3.87 3.13 7 7 7 1.9 0 3.61-.83 4.89-2.11" />
+  <path d="M18.71 13.96c.19-.63.29-1.29.29-1.96 0-3.87-3.13-7-7-7-.67 0-1.33.1-1.96.29" />
+  <line x1="2" x2="22" y1="2" y2="22" />
+</svg>

icons/package-check.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="M16 16l2 2 4-4" />
+  <path d="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M3.29 7L12 12m0 0l8.71-5M12 12v10" />
+</svg>

icons/package-minus.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="M16 16h6" />
+  <path d="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M3.29 7L12 12m0 0l8.71-5M12 12v10" />
+</svg>

icons/package-plus.svg

@@ -0,0 +1,17 @@
+<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="M16 16h6" />
+  <path d="M19 13v6" />
+  <path d="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M3.29 7L12 12m0 0l8.71-5M12 12v10" />
+</svg>

icons/package-search.svg

@@ -0,0 +1,17 @@
+<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="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M12 12v10M3.29 7L12 12 3.29 7zM12 12l8.71-5L12 12z" />
+  <circle cx="18.5" cy="15.5" r="2.5" />
+  <path d="M20.27 17.27L22 19" />
+</svg>

icons/package-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"
+>
+  <path d="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M3.29 7L12 12m0 0l8.71-5M12 12v10" />
+  <path d="M17 13l5 5m-5 0l5-5" />
+</svg>

icons/palmtree.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="M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4" />
+  <path d="M13 7.14A5.82 5.82 0 0116.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-3" />
+  <path d="M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35z" />
+  <path d="M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14" />
+</svg>

icons/stretch-horizontal.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"
+>
+  <rect x="2" y="4" width="20" height="6" rx="2" />
+  <rect x="2" y="14" width="20" height="6" rx="2" />
+</svg>

icons/stretch-vertical.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"
+>
+  <rect x="4" y="2" width="6" height="20" rx="2" />
+  <rect x="14" y="2" width="6" height="20" rx="2" />
+</svg>

icons/superscript.svg

@@ -1,15 +1,15 @@
-<svg 
-	xmlns="http://www.w3.org/2000/svg"
-	width="24" 
-	height="24" 
-	viewBox="0 0 24 24" 
-	fill="none" 
-	stroke="currentColor"
+<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="m4 19 8-8" />
-	<path d="m12 19-8-8" />
-	<path d="m20 12h-4c0-1.5 0.4417-2 1.5-2.5s2.5-1.1662 2.5-2.4985c7e-4 -0.47197-0.1706-0.92895-0.4837-1.29-0.313-0.36106-0.7475-0.60291-1.2266-0.6827s-0.9719 0.00763-1.3909 0.24676c-0.4191 0.23914-0.7375 0.61457-0.8988 1.0598" />
+  <path d="M4 19l8-8" />
+  <path d="M12 19l-8-8" />
+  <path d="M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 00-2.617-.436c-.42.239-.738.614-.899 1.06" />
 </svg>

icons/tag.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z" />
-  <line x1="7" y1="7" x2="7.01" y2="7" />
+  <path d="M2 12V2h10l9.44 9.44a2 2 0 0 1 0 2.82l-7.18 7.18a2 2 0 0 1-2.82 0L2 12Z" />
+  <path d="M7 7h.01" />
 </svg>

icons/text-cursor-input.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M5.3 4h.9C7.7 4 9 5.3 9 6.7m0 0v10.5c0 1.6-1.1 2.7-2.7 2.7h-1M9 6.7v10.6a2.6 2.6 0 0 0 2.7 2.7h1M9 6.7C9 5.2 10.2 4 11.8 4h.9" />
+  <path d="M5.3 4h.9C7.7 4 9 5.3 9 6.7m0 0v10.5c0 1.6-1.1 2.7-2.7 2.7h-1M9 6.7v10.6a2.6 2.6 0 002.7 2.7h1M9 6.7C9 5.2 10.2 4 11.8 4h.9" />
   <path d="M13.1 7.9h6.8c1.1 0 2.1 1 2.1 2.1v4c0 1.1-.9 2.1-2.1 2.1h-6.8" />
   <path d="M4.8 16.1h-.7C3 16.1 2 15.1 2 14v-4c0-1.1 1-2.1 2.1-2.1h.7" />
 </svg>

icons/text-cursor.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1" />
-  <path d="M7 22h1a4 4 0 0 0 4-4v-1" />
-  <path d="M7 2h1a4 4 0 0 1 4 4v1" />
-</svg>
+  <path d="M17 22h-1a4 4 0 01-4-4V6a4 4 0 014-4h1" />
+  <path d="M7 22h1a4 4 0 004-4v-1" />
+  <path d="M7 2h1a4 4 0 014 4v1" />
+</svg>

icons/waves.svg

@@ -0,0 +1,18 @@
+<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 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c1.3 0 1.9.5 2.5 1" />
+  <path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+  <path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+  <path d="M12 6c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+  <path d="M12 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+  <path d="M12 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+</svg>

package.json

@@ -30,6 +30,7 @@
     "lucide-preact": "yarn workspace lucide-preact",
     "lucide-vue": "yarn workspace lucide-vue",
     "lucide-vue-next": "yarn workspace lucide-vue-next",
+    "lucide-svelte": "yarn workspace lucide-svelte",
     "lucide-static": "yarn workspace lucide-static",
     "build:icons": "babel-node ./scripts/buildIcons.js --presets @babel/env",
     "build:outline-icons": "babel-node ./scripts/outlineSvg.js --presets @babel/env",
@@ -79,6 +80,7 @@
     "icons/*.svg": "npx babel-node ./scripts/optimizeStagedSvgs.js --presets @babel/env"
   },
   "dependencies": {
+    "rollup-plugin-svelte": "^7.1.0",
     "svg-outline-stroke": "^1.3.1"
   }
 }

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
   "description": "A Lucide icon library package for Angular applications",
-  "version": "0.16.28",
+  "version": "0.17.12",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",
@@ -49,7 +49,7 @@
     "codelyzer": "^6.0.2",
     "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.8",
+    "karma": "~6.3.14",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",

packages/lucide-figma/manifest.json

@@ -9,9 +9,18 @@
     "worker": "dist/src/worker/worker.html"
   },
   "parameterOnly": false,
-  "parameters": [{
-    "name": "Icon",
-    "key": "icon-name",
-    "description": "Enter the name of the icon you want to insert."
-  }]
+  "parameters": [
+    {
+      "name": "Icon",
+      "key": "icon-name",
+      "description": "Enter the name of the icon you want to insert."
+    },
+    {
+      "name": "Size",
+      "key": "size",
+      "description": "Enter the size of the icon.",
+      "allowFreeform": true,
+      "optional": true
+    }
+  ]
 }

packages/lucide-figma/src/components/EditBar/EditBar.tsx

@@ -0,0 +1,5 @@
+const EditBar = () => {
+
+}
+
+export default EditBar

packages/lucide-figma/src/components/Menu/Menu.scss

@@ -0,0 +1,30 @@
+.menu {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
+  justify-content: flex-start;
+}
+
+.menu-item {
+  font-weight: 500;
+  font-size: 11px;
+  color: var(--color-text-tertiary, #b3b3b3);
+  padding: 0 8px;
+  text-transform: capitalize;
+  cursor: pointer;
+
+  &.active {
+    color: var(--color-text, #333333);
+  }
+
+  &:first-child {
+    padding-left: 16px;
+  }
+
+  &:last-child {
+    padding-right: 16px;
+  }
+}

packages/lucide-figma/src/components/Menu/Menu.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import './Menu.scss'
+
+interface MenuProps {
+  page: string
+  setPage: (page:string) => void
+}
+
+const menuItems = ['icons', 'info']
+
+const Menu = ({page, setPage = (page) => {}}: MenuProps) => {
+  return (
+    <nav className="menu">
+      {  menuItems.map((menuItem) => (
+         <div className={`menu-item ${page === menuItem ? 'active' : null }`} onClick={() => setPage(menuItem)}>
+          {menuItem}
+        </div>
+      )) }
+    </nav>
+  )
+}
+
+export default Menu

packages/lucide-figma/src/components/Menu/index.ts

@@ -0,0 +1 @@
+export { default } from './Menu'

packages/lucide-figma/src/components/SearchInput/SearchInput.scss

@@ -1,9 +1,11 @@
 .search-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+
   .icon {
     position: absolute;
-    top: 0;
-    left: 0;
-    padding: 4px;
+    left: 16px;
   }
   input {
     width: 100%;

packages/lucide-figma/src/components/icons/SearchIcon.tsx

@@ -1,24 +1,22 @@
 import { createElement, forwardRef } from 'react'
 
-const SearchIcon = forwardRef((props: any, ref) => createElement(
-    'svg',
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: 32,
-      height: 32,
-      clipRule: 'evenodd',
-      fillRule: 'evenodd',
-      ref,
-      ...props,
-    },
-    [
-      createElement(
-        'path', {
-          d: 'm20 15c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5zm-1.1256 4.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072z',
-          key: 'path'
-        }
-      )
-    ]
-  ))
+
+const SearchIcon = (props: any) => (
+  <svg
+    width="11"
+    height="11"
+    viewBox="0 0 11 11"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M6.453 7.16C5.776 7.687 4.924 8 4 8 1.79 8 0 6.21 0 4c0-2.21 1.79-4 4-4 2.21 0 4 1.79 4 4 0 .924-.314 1.776-.84 2.453l3.194 3.193-.708.707L6.453 7.16zM7 4c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3 0-1.657 1.343-3 3-3 1.657 0 3 1.343 3 3z"
+      fillRule="evenodd"
+      fillOpacity="1"
+      stroke="none"
+    />
+  </svg>
+)
 
 export default SearchIcon

packages/lucide-figma/src/interface/interface.scss

@@ -9,6 +9,17 @@
       format('woff');
 }
 
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9')
+      format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9')
+      format('woff');
+}
+
 :root {
   --color-blue: #18a0fb;
   --color-black: #333;
@@ -47,3 +58,48 @@ footer {
     color: inherit;
   }
 }
+
+.floating {
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  padding: 10px;
+  background: blue;
+}
+
+.info-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.lucide-logo {
+  width: 160px;
+}
+
+.version {
+  margin-top: 8px;
+  padding: 8px;
+  font-weight: bold;
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.link-list {
+  width: 160px;
+  margin: 0 auto;
+  padding-top: 24px;
+}
+
+.info-link {
+  color: var(--color-blue);
+  display: block;
+  padding: 2px 0;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

packages/lucide-figma/src/interface/interface.tsx

@@ -1,15 +1,17 @@
 import { useEffect, useMemo, useState } from 'react'
-import { createReactComponent } from 'lucide-react'
 import ReactDOM from 'react-dom'
+import * as views from '../views'
+
+type Views = typeof views
 
-import IconButton from '../components/IconButton'
-import SearchInput from '../components/SearchInput'
 import useSearch, { Icon } from '../hooks/useSearch'
 
 import { getIcons } from '../api/fetchIcons'
 import './interface.scss'
+import Menu from '../components/Menu'
 
 function App() {
+  const [page, setPage] = useState('icons')
   const [query, setQuery] = useState('')
   const [icons, setIcons] = useState<Icon[]>([])
   const [tags, setTags] = useState({})
@@ -33,33 +35,20 @@ function App() {
     return null
   }
 
+  const View = views?.[page as keyof Views] ?? views.icons
+
   return (
     <div>
-      <SearchInput
-        value={query}
-        iconCount={icons.length}
-        onChange={(event)  => setQuery(event.target.value)}
+      <Menu page={page} setPage={setPage}/>
+      <View
+        {...{
+          query,
+          setQuery,
+          searchResults,
+          icons,
+          version
+        }}
       />
-      <main>
-        <div className='icon-grid'>
-          {searchResults.map(([name, iconNode] :any) => (
-            <IconButton
-              name={name}
-              key={name}
-              component={createReactComponent(name, iconNode)}
-            />
-          ))}
-        </div>
-        <footer>
-          <a
-            href="https://lucide.dev"
-            target="_blank"
-            className='footer-link'
-          >
-            Lucide v{version}
-          </a>
-        </footer>
-      </main>
     </div>
   )
 }

packages/lucide-figma/src/main.ts

@@ -5,6 +5,12 @@ figma.showUI(__uiFiles__.worker, { visible: false })
 
 let cachedIcons: LucideIcons
 
+type InsertableNodes = FrameNode | GroupNode
+
+function isInsertableNode (node: SceneNode): node is InsertableNodes {
+  return ['FRAME', 'GROUP'].includes(node.type)
+}
+
 const setResults = ({result, query, lucideIcons} : { result: SuggestionResults, query: string, lucideIcons: LucideIcons }) => {
   const icons = Object.entries(lucideIcons.iconNodes);
 
@@ -16,33 +22,65 @@ const setResults = ({result, query, lucideIcons} : { result: SuggestionResults,
   result.setSuggestions(suggestions)
 }
 
+// const styles = figma.getLocalPaintStyles();
+// const styleNames = styles.map((style) => style.name);
+// console.log(styleNames);
+
 figma.parameters.on('input', async ({ parameters, key, query, result }) => {
   if (key === 'icon-name') {
-    console.log('typ tpy', query);
     cachedIcons = await figma.clientStorage.getAsync(`lucide-icons`)
-    console.log('cachedIcons', cachedIcons);
 
     if(cachedIcons && cachedIcons.iconNodes && cachedIcons.tags) {
       setResults({result, query, lucideIcons: cachedIcons})
     }
   }
+  if(key === 'size') {
+    const iconSizes = [24,36,48,72]
+    result.setSuggestions(iconSizes.map((size)=>({
+      name: size.toString(),
+      data: size
+    })))
+  }
 })
 
-const drawIcon = ({icon: {name, svg}}: any) => {
+const drawIcon = ({icon: {name, svg, size }}: any) => {
   const min = 0
   const max = 100
   const randomPosition = () => Math.floor(Math.random() * (max - min + 1) + min)
+
   const icon = figma.createNodeFromSvg(svg)
+  icon.setPluginData('isLucideIcon', 'true')
+  icon.setPluginData('iconName', name)
+
+  const pluginData = icon.getPluginData('isLucideIcon')
 
   icon.name = name
   icon.x = Math.round(figma.viewport.center.x + randomPosition())
   icon.y = Math.round(figma.viewport.center.y + randomPosition())
+
+  if(figma.currentPage.selection.length) {
+    let currentSelection = figma.currentPage.selection[0]
+    const isLucideIcon = currentSelection.getPluginData('isLucideIcon')
+
+    // if(isLucideIcon && currentSelection?.parent) {
+    //   return
+    //   // currentSelection = currentSelection.parent as SceneNode
+    // }
+
+    if(!isLucideIcon && isInsertableNode(currentSelection)) {
+      icon.x = currentSelection.type === 'GROUP' ? currentSelection.x : 0
+      icon.y = currentSelection.type === 'GROUP' ? currentSelection.y : 0
+
+      currentSelection.appendChild(icon)
+    }
+  }
+
   figma.currentPage.selection = [icon]
 
   // lock children
-  icon.children.forEach((vectorNode, key) => {
-    icon.children[key].locked = true
-  });
+  // icon.children.forEach((vectorNode, key) => {
+  //   icon.children[key].locked = true
+  // });
 }
 
 const setCachedIcons = async (pluginMessage: any) => {
@@ -66,7 +104,6 @@ const getCachedIcons = async () => {
 getCachedIcons()
 
 figma.ui.onmessage = (event) => {
-  console.log(event, 'main');
   switch (event.type) {
     case "drawIcon":
       drawIcon(event)
@@ -90,7 +127,12 @@ figma.ui.onmessage = (event) => {
 
 figma.on('run', event => {
   if(event.parameters) {
-    figma.ui.postMessage({ type: 'getSvg', iconName: event.parameters['icon-name'], cachedIcons })
+    figma.ui.postMessage({
+      type: 'getSvg',
+      iconName: event.parameters['icon-name'],
+      size: event.parameters['size'],
+      cachedIcons
+    })
   } else {
     figma.showUI(__uiFiles__.interface, { width: 300, height: 400 })
   }

packages/lucide-figma/src/views/Icons.tsx

@@ -0,0 +1,53 @@
+import { createReactComponent } from 'lucide-react'
+
+import IconButton from '../components/IconButton'
+import SearchInput from '../components/SearchInput'
+import { Icon } from '../hooks/useSearch'
+
+interface PageProps {
+  query: string
+  setQuery: (query:string) => void
+  searchResults: Icon[]
+  icons: Icon[]
+  version: string
+}
+
+const Icons = ({
+  query,
+  setQuery,
+  searchResults,
+  icons,
+  version
+}: PageProps) => {
+  return (
+    <>
+      <SearchInput
+        value={query}
+        iconCount={icons.length}
+        onChange={(event)  => setQuery(event.target.value)}
+      />
+        <main>
+          <div className='icon-grid'>
+            {searchResults.map(([name, iconNode] :any) => (
+              <IconButton
+                name={name}
+                key={name}
+                component={createReactComponent(name, iconNode)}
+              />
+            ))}
+          </div>
+          <footer>
+            <a
+              href="https://lucide.dev"
+              target="_blank"
+              className='footer-link'
+            >
+              Lucide v{version}
+            </a>
+          </footer>
+        </main>
+    </>
+  )
+}
+
+export default Icons

packages/lucide-figma/src/views/Info.tsx

@@ -0,0 +1,64 @@
+import { SyntheticEvent } from "react"
+
+interface PageProps {
+  version: string
+}
+
+const Info = ({ version }: PageProps) => {
+  const menuItems = [
+    {
+      name: 'Report a bug',
+      url: 'https://github.com/lucide-icons/lucide/issues'
+    },
+    {
+      name: 'Contribute an icon',
+      url: 'https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md'
+    },
+    {
+      name: 'Website',
+      url: 'https://lucide.dev'
+    },
+    {
+      name: 'Repository',
+      url: 'https://github.com/lucide-icons/lucide'
+    },
+    {
+      name: 'License',
+      url: 'https://lucide.dev/license'
+    },
+    {
+      name: 'Community Page',
+      url: 'https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons'
+    },
+    {
+      name: 'Supported Frameworks',
+      url: 'https://lucide.dev/packages'
+    }
+  ]
+
+  const onClick = (url: string) => (event: SyntheticEvent) => {
+    event.preventDefault()
+
+    window.open(url,'_blank')
+  }
+
+  return (
+    <div className="info-page">
+      <img src="https://lucide.dev/logo-text.svg" alt="Lucide Logo" className="lucide-logo"/>
+      <p className='version'>
+        v{version}
+      </p>
+      <section className="link-list">
+        {
+          menuItems.map(({ name, url }) => (
+            <a href={url} key={name} aria-label={name} className="info-link" onClick={onClick(url)}>
+              {name}
+            </a>
+          ))
+        }
+      </section>
+    </div>
+  )
+}
+
+export default Info

packages/lucide-figma/src/views/index.ts

@@ -0,0 +1,2 @@
+export { default as icons } from './Icons'
+export { default as info } from './Info'

packages/lucide-figma/src/worker/worker.ts

@@ -14,20 +14,26 @@ const getLatestIcons = async ({ cachedIcons }: any) => {
   }, "*")
 }
 
-const getSvg = async ({ cachedIcons, iconName }: { cachedIcons: LucideIcons, iconName: string }) => {
+const getSvg = async ({ cachedIcons, iconName, size = 24 }: { cachedIcons: LucideIcons, iconName: string, size: number }) => {
   if (!cachedIcons) {
     return;
   }
 
+  console.log( iconName, size)
+
   const iconNode = cachedIcons.iconNodes[iconName];
 
   if (iconNode) {
     const IconComponent = createReactComponent(iconName, iconNode)
-    const svg = renderToString(createElement(IconComponent));
+    const svg = renderToString(createElement(IconComponent, { size }));
 
     parent.postMessage({ pluginMessage: {
       type: 'drawIcon',
-      icon: { name, svg }
+      icon: {
+        name: iconName,
+        svg,
+        size
+      }
     }}, '*')
 
     parent.postMessage({ pluginMessage: {
@@ -56,5 +62,3 @@ window.onmessage = async (event) => {
       break;
   }
 }
-
-console.log('Hello world!')

packages/lucide-flutter/pubspec.yaml

@@ -1,6 +1,6 @@
 name: lucide_icons
 description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
-version: 0.16.28
+version: 0.17.12
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide
 

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
   "description": "A Lucide icon library package for Preact applications",
-  "version": "0.16.28",
+  "version": "0.17.12",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-preact/rollup.config.js

@@ -30,7 +30,7 @@ const configs = bundles
     inputs.map(input => ({
       input,
       plugins: plugins(pkg, minify),
-      external: ['preact', 'prop-types', 'lucide'],
+      external: ['preact', 'prop-types'],
       output: {
         name: packageName,
         file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,

packages/lucide-react/README.md

@@ -16,7 +16,7 @@ npm install lucide-react
 
 ## How to use
 
-It's build with ESmodules so it's completely threeshakable.
+It's built with ES modules so it's completely threeshakable.
 Each icon can be imported as a react component.
 
 ### Example
@@ -25,9 +25,7 @@ You can pass additional props to adjust the icon.
 
 ``` js
 import { Camera } from 'lucide-react';
-// Returns ReactComponent
 
-// Usage
 const App = () => {
   return <Camera color="red" size={48}/>
 };
@@ -48,19 +46,16 @@ export default App;
 You can also pass custom props that will be added in the svg as attributes.
 
 ``` js
-// Usage
 const App = () => {
   return <Camera fill="red"/>
 };
 ```
 
-### One generic icon component
+### Generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create a generic icon component to load icons.
 
-> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
-
-#### Icon Component Example
+> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
 
 ``` js
 import * as icons from 'lucide-react';

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
   "description": "A Lucide icon library package for React applications",
-  "version": "0.16.28",
+  "version": "0.17.12",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-svelte/.gitignore

@@ -0,0 +1 @@
+src/icons/*.svelte

packages/lucide-svelte/.npmignore

@@ -0,0 +1,9 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js

packages/lucide-svelte/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Lucide Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

packages/lucide-svelte/README.md

@@ -0,0 +1,91 @@
+# Lucide Svelte
+
+Implementation of the lucide icon library for svelte applications.
+
+> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
+
+## Installation
+
+```sh
+yarn add lucide-svelte
+
+# or
+
+npm install lucide-svelte
+```
+
+## How to use
+
+All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.
+
+### Example
+
+Default usage:
+
+```sv
+<script>
+import { Skull } from 'lucide-svelte'
+</script>
+
+<Skull/>
+```
+
+You can pass additional props to adjust the icon.
+
+```sv
+<script>
+import { Camera } from 'lucide-svelte'
+</script>
+
+<Camera />
+```
+
+### Available props
+
+|  name          |   type   |  default
+| -------------- | -------- | --------
+| `size`         | *Number* | 24
+| `color`        | *String* | currentColor
+| `strokeWidth`  | *Number* | 2
+| `*<SVGProps>`  | *String* | -
+
+* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
+
+### Example of custom props
+
+```sv
+<script>
+import { Phone } from 'lucide-svelte'
+</script>
+
+<Phone fill="#333"/>
+```
+
+This results a filled phone icon.
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you bundle your application,the build size will grow strongly. Because it will import all the icons.
+
+#### Icon Component Example
+
+``` svelte
+<script>
+  import * as icons from "lucide-svelte";
+  export let name;
+</script>
+
+<svelte:component this={icons[name]} {...$$props}/>
+```
+
+##### Then you can use it like this
+
+``` svelte
+<script>
+  import LucideIcon from "./LucideIcon";
+</script>
+
+<LucideIcon name="Menu" />
+```

packages/lucide-svelte/babel.config.js

@@ -0,0 +1,14 @@
+const mainConfig = require('../../babel.config');
+
+module.exports = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        loose: true,
+        modules: false,
+      },
+    ],
+  ],
+  env: mainConfig.env,
+};

packages/lucide-svelte/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  verbose: true,
+  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
+  transformIgnorePatterns: [`/node_modules`],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.svelte$': 'svelte-jester',
+  },
+  moduleFileExtensions: ['js', 'svelte'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+};

packages/lucide-svelte/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "lucide-svelte",
+  "description": "A Lucide icon library package for Svelte applications",
+  "version": "0.17.12",
+  "license": "ISC",
+  "homepage": "https://lucide.dev",
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git",
+    "directory": "packages/lucide-svelte"
+  },
+  "author": "Eric Fennis",
+  "amdName": "lucide-svelte",
+  "main": "dist/cjs/lucide-svelte.js",
+  "main:umd": "dist/umd/lucide-svelte.js",
+  "module": "dist/esm/lucide-svelte.js",
+  "svelte": "dist/esm/lucide-svelte.js",
+  "unpkg": "dist/umd/lucide-svelte.min.js",
+  "typings": "dist/lucide-svelte.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
+    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.svelte && rm -f index.js",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-svelte/src --templateSrc=../packages/lucide-svelte/scripts/exportTemplate --exportFileName=index.js --iconFileExtention=.svelte --pretty=false",
+    "build:es": "babel src -d dist/esm --copy-files",
+    "build:types": "yarn --cwd ../../ babel-node packages/lucide-svelte/scripts/buildTypes.js",
+    "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-svelte/rollup.config.js",
+    "test": "jest",
+    "test:watch": "npm run test -- --watch"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/preact": "^2.0.1",
+    "@testing-library/svelte": "^3.0.3",
+    "babel-preset-preact": "^2.0.0",
+    "jest": "^26.6.3",
+    "rollup-plugin-svelte": "^7.1.0",
+    "svelte": "^3.45.0",
+    "svelte-jester": "^2.3.1",
+    "svelte-preprocess": "^4.10.1",
+    "svelte2tsx": "^0.4.12"
+  },
+  "peerDependencies": {
+    "svelte": "^3.45.0",
+    "svelte2tsx": "^0.4.12"
+  }
+}

packages/lucide-svelte/rollup.config.js

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import svelte from 'rollup-plugin-svelte';
+import preprocess from 'svelte-preprocess';
+import bundleSize from '@atomico/rollup-plugin-sizes';
+import { terser } from 'rollup-plugin-terser';
+import license from 'rollup-plugin-license';
+import resolve from '@rollup/plugin-node-resolve';
+import commonJS from '@rollup/plugin-commonjs';
+import pkg from './package.json';
+
+const packageName = 'LucideSvelte';
+const outputFileName = 'lucide-svelte';
+const rootDir = 'packages/lucide-svelte'; // It runs from the root
+const outputDir = `${rootDir}/dist`;
+const inputs = [`${rootDir}/src/lucide-svelte.js`];
+const bundles = [
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    minify: true,
+    sourcemap: true,
+  },
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    sourcemap: true,
+  },
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+    sourcemap: true,
+  },
+];
+
+const configs = bundles
+  .map(({ inputs, outputDir, format, minify }) =>
+    inputs.map(input => ({
+      input,
+      plugins: [
+        svelte({
+          preprocess,
+          compilerOptions: {
+            dev: false,
+          },
+          emitCss: false,
+        }),
+        resolve(),
+        commonJS({
+          include: 'node_modules/**',
+        }),
+        // The two minifiers together seem to procude a smaller bundle 🤷‍♂️
+        minify && terser(),
+        license({
+          banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
+        }),
+        bundleSize(),
+      ],
+      external: ['svelte'],
+      output: {
+        name: packageName,
+        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        format,
+        sourcemap: true,
+        globals: {
+          svelte: 'svelte',
+        },
+      },
+    })),
+  )
+  .flat();
+
+export default configs;

packages/lucide-svelte/scripts/buildTypes.js

@@ -0,0 +1,50 @@
+import path from 'path';
+import {
+  writeFile,
+  readSvgDirectory,
+  resetFile,
+  toPascalCase,
+  appendFile,
+} from '../../../scripts/helpers';
+
+const srcDirectory = path.join(__dirname, '../dist');
+
+// Declare type definitions
+const typeDefinitions = `\
+/// <reference types="svelte" />
+/// <reference types="svelte2tsx/svelte-jsx" />
+import { SvelteComponentTyped } from "svelte";
+
+interface IconProps extends Partial<svelte.JSX.SVGProps<SVGSVGElement>> {
+  color?: string
+  size?: number,
+  strokeWidth?: number,
+  class?: string
+}
+
+interface IconEvents {
+  [evt: string]: CustomEvent<any>;
+}
+
+export type Icon = SvelteComponentTyped<IconProps, IconEvents, {}>
+
+// Generated icons
+`;
+
+const ICONS_DIR = path.resolve(__dirname, '../../../icons');
+const TYPES_FILE = 'lucide-svelte.d.ts';
+
+resetFile(TYPES_FILE, srcDirectory);
+writeFile(typeDefinitions, TYPES_FILE, srcDirectory);
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+svgFiles.forEach(svgFile => {
+  const iconName = path.basename(svgFile, '.svg');
+  const componentName = toPascalCase(iconName);
+
+  const exportTypeString = `export declare class ${componentName} extends SvelteComponentTyped<IconProps, IconEvents, {}> {}\n`;
+  appendFile(exportTypeString, TYPES_FILE, srcDirectory);
+});
+
+console.log(`Generated ${TYPES_FILE} file with`, svgFiles.length, 'icons');

packages/lucide-svelte/scripts/exportTemplate.js

@@ -0,0 +1,17 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { stringify } from 'svgson';
+
+export default ({ iconName, children }) => {
+  const iconChildNodes = children.map(([name, attributes]) => ({ name, attributes, children: [] }));
+  const iconChildrenHTML = iconChildNodes.map(stringify).join('\n  ');
+  return `\
+<script>
+import Icon from '../Icon.svelte';
+</script>
+
+<Icon name="${iconName}" {...$$props} >
+  ${iconChildrenHTML}
+  <slot/>
+</Icon>
+`;
+};

packages/lucide-svelte/src/Icon.svelte

@@ -0,0 +1,19 @@
+<script>
+  import defaultAttributes from './defaultAttributes'
+  export let name
+  export let color = 'currentColor'
+  export let size = 24
+  export let strokeWidth = 2
+</script>
+
+<svg
+  {...defaultAttributes}
+  {...$$restProps}
+  width={size}
+  height={size}
+  stroke={color}
+  stroke-width={strokeWidth}
+  class={`lucide-icon lucide lucide-${name} ${$$props.class ?? ''}`}
+>
+  <slot />
+</svg>

packages/lucide-svelte/src/defaultAttributes.js

@@ -0,0 +1,13 @@
+const defaultAttributes = {
+  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',
+};
+
+export default defaultAttributes;

packages/lucide-svelte/src/icons/.gitkeep

@@ -0,0 +1 @@
+Folder for generated icons

packages/lucide-svelte/src/lucide-svelte.js

@@ -0,0 +1 @@
+export * from './icons';

packages/lucide-svelte/svelte.config.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+  preprocess: sveltePreprocess(),
+};

packages/lucide-svelte/tests/TestSlots.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Smile from '../src/icons/smile.svelte'
+</script>
+
+<Smile>
+  <text>Test</text>
+</Smile>

packages/lucide-svelte/tests/__snapshots__/lucide-svelte.spec.js.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Using lucide icon components should add a class to the element 1`] = `
+<svg
+  class="lucide-icon lucide lucide-smile my-icon"
+  fill="none"
+  height="24"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  viewBox="0 0 24 24"
+  width="24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle
+    cx="12"
+    cy="12"
+    r="10"
+  />
+   
+  <path
+    d="M8 14s1.5 2 4 2 4-2 4-2"
+  />
+   
+  <line
+    x1="9"
+    x2="9.01"
+    y1="9"
+    y2="9"
+  />
+   
+  <line
+    x1="15"
+    x2="15.01"
+    y1="9"
+    y2="9"
+  />
+   
+</svg>
+`;
+
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
+<body>
+  <div>
+    <svg
+      class="lucide-icon lucide lucide-smile "
+      fill="none"
+      height="48"
+      stroke="red"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="4"
+      viewBox="0 0 24 24"
+      width="48"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+       
+      <path
+        d="M8 14s1.5 2 4 2 4-2 4-2"
+      />
+       
+      <line
+        x1="9"
+        x2="9.01"
+        y1="9"
+        y2="9"
+      />
+       
+      <line
+        x1="15"
+        x2="15.01"
+        y1="9"
+        y2="9"
+      />
+       
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`Using lucide icon components should render an component 1`] = `
+<body>
+  <div>
+    <svg
+      class="lucide-icon lucide lucide-smile "
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+       
+      <path
+        d="M8 14s1.5 2 4 2 4-2 4-2"
+      />
+       
+      <line
+        x1="9"
+        x2="9.01"
+        y1="9"
+        y2="9"
+      />
+       
+      <line
+        x1="15"
+        x2="15.01"
+        y1="9"
+        y2="9"
+      />
+       
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`Using lucide icon components should render an icon slot 1`] = `
+<body>
+  <div>
+    <svg
+      class="lucide-icon lucide lucide-smile "
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+       
+      <path
+        d="M8 14s1.5 2 4 2 4-2 4-2"
+      />
+       
+      <line
+        x1="9"
+        x2="9.01"
+        y1="9"
+        y2="9"
+      />
+       
+      <line
+        x1="15"
+        x2="15.01"
+        y1="9"
+        y2="9"
+      />
+       
+      <text>
+        Test
+      </text>
+    </svg>
+  </div>
+</body>
+`;

packages/lucide-svelte/tests/lucide-svelte.spec.js

@@ -0,0 +1,55 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { Smile } from '../src/icons'
+import TestSlots from './TestSlots.svelte'
+
+describe('Using lucide icon components', () => {
+  it('should render an component', () => {
+    const { container } = render(Smile);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should adjust the size, stroke color and stroke width', () => {
+    const { container } = render(Smile, {
+      props: {
+        size: 48,
+        color: 'red',
+        strokeWidth: 4
+      }
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should add a class to the element', () => {
+    render(Smile, {
+      props: {
+        class: "my-icon"
+      }
+    });
+
+    const [icon] = document.getElementsByClassName('my-icon');
+
+    expect(icon).toBeInTheDocument();
+    expect(icon).toMatchSnapshot();
+    expect(icon.getAttribute("class")).toBe(['lucide-icon','lucide','lucide-smile', 'my-icon'].join(' '));
+  });
+
+  it('should add a style attribute to the element', () => {
+    render(Smile, {
+      props: {
+        style: "position: absolute;"
+      }
+    });
+    const [icon] = document.getElementsByClassName('lucide');
+
+    expect(icon.getAttribute('style')).toContain('position: absolute');
+  });
+
+  it('should render an icon slot', () => {
+    const { container, getByText } = render(TestSlots);
+
+    const textElement = getByText('Test');
+    expect(textElement).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+});

packages/lucide-vue-next/jest.config.js

@@ -11,4 +11,5 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
 };

packages/lucide-vue-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue-next",
-  "version": "0.16.28",
+  "version": "0.17.12",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",
@@ -30,13 +30,14 @@
     "test:watch": "jest --watchAll"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/test-utils": "^2.0.0-rc.14",
+    "@testing-library/vue": "^6.4.2",
+    "@vue/compiler-sfc": "3.0.1",
+    "@vue/test-utils": "2.0.0-rc.18",
     "jest-serializer-vue": "^2.0.2",
     "vue": "3.0.6",
     "vue-jest": "^5.0.0-alpha.10"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": ">=3.0.1"
   }
 }

packages/lucide-vue-next/src/createVueComponent.js

@@ -11,18 +11,26 @@ import defaultAttributes from './defaultAttributes';
  */
 export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
-const createVueComponent = (iconName, iconNode) => (props, context) =>
-  h(
+const createVueComponent = (iconName, iconNode) => (
+  { size, color, ...props }, // props
+  { attrs, emit, slots } // context
+  ) => {
+  return h(
     'svg',
     {
       ...defaultAttributes,
-      width: props.size || defaultAttributes.width,
-      height: props.size || defaultAttributes.height,
-      class: ['lucide', `lucide-${toKebabCase(iconName)}`],
-      ...context.attrs,
+      width: size || defaultAttributes.width,
+      height: size || defaultAttributes.height,
+      stroke: color || defaultAttributes.stroke,
+      ...attrs,
+      class: ['lucide', `lucide-${toKebabCase(iconName)}`, attrs?.class || ''],
       ...props,
     },
-    iconNode.map(child => h(...child)),
+    [
+      ...iconNode.map(child => h(...child)),
+      ...(slots.default ? [slots.default()] : [])
+    ],
   );
+};
 
 export default createVueComponent;