Lucide Svelte Package! (#476)

* init svelte project

* Add export script for lucide-svelte

* make lucide-svelte wokring

* make ready for first release

* update lock file

* bump version

* some fixes in the build

* Add tests

* Finish tests

* Update Readme

* update lock file

* Add svelte to gh actions

* Add svetle to website docs

* Add test ci script

* adjust action

* add on PR trigger

* remove dep

* fix tests

* Add svelte entry in package.json

* update snapshots

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

docs/index.md

@@ -17,7 +17,7 @@ When designing new icons, the community is working with a set of design rules. T
 
 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 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), [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).
+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).
 
 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

@@ -8,7 +8,7 @@ title: Installation
 
 Implementation of the lucide icon library for web applications.
 
-```sh
+```bash
 npm install lucide
 
 #or
@@ -22,7 +22,7 @@ For more details, see the [documentation](packages/lucide).
 
 Implementation of the lucide icon library for react applications.
 
-```sh
+```bash
 yarn add lucide-react
 
 # or
@@ -30,13 +30,13 @@ yarn add lucide-react
 npm install lucide-react
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react#lucide-react).
+For more details, see the [documentation](packages/lucide-react).
 
 ## Vue 2
 
 Implementation of the lucide icon library for vue applications.
 
-```sh
+```bash
 yarn add lucide-vue
 
 # or
@@ -44,13 +44,13 @@ yarn add lucide-vue
 npm install lucide-vue
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue).
+For more details, see the [documentation](packages/lucide-vue).
 
 ## Vue 3
 
 Implementation of the lucide icon library for vue applications.
 
-```sh
+```bash
 yarn add lucide-vue-next
 
 # or
@@ -58,11 +58,25 @@ yarn add lucide-vue-next
 npm install lucide-vue-next
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#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
 
-```sh
+```bash
 yarn add lucide-angular
 
 # or
@@ -70,13 +84,13 @@ yarn add lucide-angular
 npm install lucide-angular
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular#lucide-angular).
+For more details, see the [documentation](packages/lucide-angular).
 
 ## Preact
 
 Implementation of the lucide icon library for preact applications.
 
-```sh
+```bash
 yarn add lucide-preact
 
 # or
@@ -84,7 +98,7 @@ yarn add lucide-preact
 npm install lucide-preact
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact#lucide-preact).
+For more details, see the [documentation](packages/lucide-preact).
 
 ## Figma
 
@@ -98,7 +112,7 @@ Visit [Figma community page](https://www.figma.com/community/plugin/939567362549
 
 Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
 
-```sh
+```bash
 composer require mallardduck/blade-lucide-icons
 ```
 
@@ -108,7 +122,7 @@ For more details, see the [documentation](https://github.com/mallardduck/blade-l
 
 Implementation of Lucide icon library for Flutter applications.
 
-```sh
+```bash
 flutter pub add lucide_icons
 ```
 

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-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" />
+```

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.29-.313-.362-.747-.603-1.226-.683s-.972.007-1.391.247c-.42.239-.738.614-.899 1.06" />
 </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>

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-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-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.16.26-beta.0",
+  "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();
+  });
+});

rollup.plugins.js

@@ -16,6 +16,10 @@ const plugins = (pkg, minify) =>
       delimiters: ['', ''],
       preventAssignment: false,
     }),
+    resolve(),
+    commonJS({
+      include: 'node_modules/**',
+    }),
     babel({
       babelHelpers: 'bundled',
     }),
@@ -26,10 +30,6 @@ const plugins = (pkg, minify) =>
       banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
     }),
     bundleSize(),
-    resolve(),
-    commonJS({
-      include: 'node_modules/**',
-    }),
     visualizer({
       sourcemap: true,
       filename: `stats/${pkg.name}${minify ? '-min' : ''}.html`,

scripts/build/generateExportsFile.js

@@ -2,7 +2,7 @@ import path from 'path';
 
 import { toPascalCase, resetFile, appendFile } from '../helpers';
 
-export default function(inputEntry, outputDirectory, iconNodes) {
+export default function(inputEntry, outputDirectory, iconNodes, iconFileExtention = '') {
   const fileName = path.basename(inputEntry);
 
   // Reset file
@@ -10,10 +10,12 @@ export default function(inputEntry, outputDirectory, iconNodes) {
 
   const icons = Object.keys(iconNodes);
 
+  const fileExtention = iconFileExtention === '.ts' || iconFileExtention === '.js' ? '' : iconFileExtention
+
   // Generate Import for Icon VNodes
   icons.forEach(iconName => {
     const componentName = toPascalCase(iconName);
-    const importString = `export { default as ${componentName} } from './${iconName}';\n`;
+    const importString = `export { default as ${componentName} } from './${iconName}${fileExtention}';\n`;
     appendFile(importString, fileName, outputDirectory);
   });
 

scripts/build/generateIconFiles.js

@@ -5,7 +5,7 @@ import prettier from 'prettier';
 import { promises } from 'stream';
 import { toPascalCase } from '../helpers';
 
-export default function({ iconNodes, outputDirectory, template, showLog = true, iconFileExtention = '.js' }) {
+export default function({ iconNodes, outputDirectory, template, showLog = true, iconFileExtention = '.js', pretty = true }) {
   const icons = Object.keys(iconNodes);
   const iconsDistDirectory = path.join(outputDirectory, `icons`);
 
@@ -21,17 +21,25 @@ export default function({ iconNodes, outputDirectory, template, showLog = true,
     children = children.map(({name, attributes}) => ([name, attributes]))
 
     const elementTemplate = template({ componentName, iconName, children });
+    const output =
+      pretty
+      ? prettier.format(elementTemplate, {
+        singleQuote: true,
+        trailingComma: 'all',
+        parser: 'babel',
+      })
+      : elementTemplate
 
-    await fs.promises.writeFile(location, prettier.format(elementTemplate, { singleQuote: true, trailingComma: 'all', parser: 'babel' }), 'utf-8');
+    await fs.promises.writeFile(location, output, 'utf-8');
   });
 
   Promise.all(writeIconFiles)
-  .then(() => {
-    if(showLog) {
-      console.log('Successfully built', icons.length, 'icons.');
-    }
-  })
-  .catch((error) => {
-    throw new Error(`Something went wrong generating icon files,\n ${error}`)
-  })
+    .then(() => {
+      if(showLog) {
+        console.log('Successfully built', icons.length, 'icons.');
+      }
+    })
+    .catch((error) => {
+      throw new Error(`Something went wrong generating icon files,\n ${error}`)
+    })
 }

scripts/buildIcons.js

@@ -23,6 +23,7 @@ const {
   silent = false,
   iconFileExtention = '.js',
   exportFileName = 'index.js',
+  pretty = true,
 } = cliArguments;
 
 const svgFiles = readSvgDirectory(ICONS_DIR);
@@ -39,6 +40,7 @@ generateIconFiles({
   template: iconFileTemplate,
   showLog: !silent,
   iconFileExtention,
+  pretty: JSON.parse(pretty),
 });
 
 // Generates entry files for the compiler filled with icons exports
@@ -46,4 +48,5 @@ generateExportsFile(
   path.join(OUTPUT_DIR, 'icons', exportFileName),
   path.join(OUTPUT_DIR, 'icons'),
   icons,
+  iconFileExtention,
 );

site/src/lib/docsMenuTree.ts

@@ -84,6 +84,10 @@ const docsMenuTree = [
         title: 'Lucide Vue Next (Vue 3)',
         href: 'lucide-vue-next'
       },
+      {
+        title: 'Lucide Svelte',
+        href: 'lucide-svelte'
+      },
       {
         title: 'Lucide Preact',
         href: 'lucide-preact'

site/src/lib/packageData.tsx

@@ -27,29 +27,36 @@ export default {
       { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-vue-next', href: "https://www.npmjs.com/package/lucide-vue-next" }
     ]
   },
-  'lucide-preact': {
+  'lucide-svelte': {
     order: 4,
+    shields: [
+      { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-svelte', href: "https://www.npmjs.com/package/lucide-svelte" },
+      { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-svelte', href: "https://www.npmjs.com/package/lucide-svelte" }
+    ]
+  },
+  'lucide-preact': {
+    order: 5,
     shields: [
       { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-preact', href: "https://www.npmjs.com/package/lucide-preact" },
       { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-preact', href: "https://www.npmjs.com/package/lucide-preact" }
     ]
   },
   'lucide-angular': {
-    order: 5,
+    order: 6,
     shields: [
       { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-angular', href: "https://www.npmjs.com/package/lucide-angular" },
       { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-angular', href: "https://www.npmjs.com/package/lucide-angular" }
     ]
   },
   'lucide-static': {
-    order: 6,
+    order: 7,
     shields: [
       { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-static', href: "https://www.npmjs.com/package/lucide-static" },
       { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-static', href: "https://www.npmjs.com/package/lucide-static" }
     ]
   },
   'lucide-flutter': {
-    order: 7,
+    order: 8,
     shields: [
       { alt: 'flutter', src: 'https://img.shields.io/pub/v/lucide_icons', href: "https://pub.dev/packages/lucide_icons" },
     ]