0.1.0-alpha.0

.eslintignore

@@ -2,4 +2,3 @@ dist
 build
 coverage
 lib
-tests

.github/workflows/font.yml

@@ -1,48 +0,0 @@
-name: Build Lucide
-on:
-  push:
-    branches: [ master ]
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  Build:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Clone 'Lucide'
-      uses: actions/checkout@v2
-
-    - name: Install FontForge
-      run: sudo apt-get install zlib1g-dev fontforge woff2
-
-    - name: Clone sfnt2woff-zopfli repo
-      run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
-
-    - name: Install and move sfnt2woff-zopfli
-      run: |
-          cd sfnt2woff-zopfli
-          make
-          sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
-
-    - name: Clone woff2
-      run: git clone --recursive https://github.com/google/woff2.git
-
-    - name: Install woff2
-      run: |
-          cd woff2
-          sudo make clean all
-          sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
-
-    - name: Install Font Custom dependency
-      run: sudo gem install fontcustom
-
-    - name: Build 'Lucide'
-      run: echo "Building Featherity font" && fontcustom compile ./icons -h -n Featherity -o build -F
-
-    - name: Zip 'Lucide'
-      run: zip -r Featherity.zip build
-
-    - name: 'Upload to Artifacts'
-      uses: actions/upload-artifact@v1.0.0
-      with:
-        name: Lucide
-        path: build

.gitignore

@@ -1,10 +1,8 @@
 .DS_Store
-.next
-.now
 node_modules
 dist
 build
-/lib
+lib
 sandbox
 stash
 coverage

.npmignore

@@ -1,7 +0,0 @@
-.github
-packages
-stats
-node_modules
-tests
-scripts
-site

CONTRIBUTING.md

@@ -21,4 +21,4 @@ Guidelines for pull requests:
 
 Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a :+1:.
 
-If the icon has not already been requested, [create an issue](https://github.com/lucide-icons/lucide/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.
+If the icon has not already been requested, [create an issue](https://github.com/featherity/featherity/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.

LICENSE

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2020, Lucide Contributors
+Copyright (c) 2020, Featherity 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

README.md

@@ -1,12 +1,10 @@
-# Lucide
+# Featherity
 
-![NPM](https://img.shields.io/npm/l/lucide)
-[![npm](https://img.shields.io/npm/v/lucide)](https://www.npmjs.com/package/lucide)
 [![Discord](https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA)](https://discord.gg/EH6nSts)
 
-## What is Lucide?
+## What is Featherity?
 
-Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
+Featherity is a fork of [Feather Icons](https://github.com/feathericons/feather), with icons sourced by the community.
 
 ## Table of Contents
 
@@ -16,125 +14,61 @@ Lucide is a community-run fork of [Feather Icons](https://github.com/feathericon
 * [License](#license)
 
 ## Installation
-
-### Package Managers
-
 ``` bash
-npm install lucide
+npm install featherity
 #or
-yarn add lucide
-```
-
-### CDN
-
-``` html
-<!-- Development version -->
-<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
-
-<!-- Production version -->
-<script src="https://unpkg.com/lucide@latest"></script>
+yarn add featherity
 ```
 
 ## Usage
 
-At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather 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)
+At its core, Featherity is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather 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)
 
-The following are additional ways you can use Lucide.
-With the Javascript library you can easily incorporate the icon you want in your webpage.
+The following are additional ways you can use Featherity.
 
-### With unpkg
+### ESModule
 
-Here is a complete example with unpkg
+``` js
+import { Camera } from 'featherity';
+// Returns HTMLElement
 
-```html
-<!DOCTYPE html>
-<body>
-  <i icon-name="volume-2" class="my-class"></i>
-  <i icon-name="x"></i>
-  <i icon-name="menu"></i>
-
-  <script src="https://unpkg.com/lucide@latest"></script>
-  <script>
-    lucide.createIcons();
-  </script>
-</body>
+// Usage
+document.appendChild(Camera);
 ```
 
-### With ESModules
+### React
 
-To reduce bundle size, lucide is build to be fully threeshakeble.
-The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
+``` js
+import { Camera } from 'featherity/react';
+// Returns ReactComponent
 
-```html
-<!-- Your HTML file -->
-<i icon-name="menu"></i>
+// Usage
+const App = () => {
+  return <Camera color="red" size={48}/>
+};
+
+export default App;
 ```
 
-```js
-import { createIcons, icons } from 'lucide';
+### Vue
 
-// Caustion, this will import all the icons and bundle them.
-createIcons({icons});
+``` vue
+<template>
+  <div id="app">
+    <Camera color="red" :size="48"/>
+  </div>
+</template>
 
-// Recommended way, to include only the icons you need.
-import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
+<script>
+import { Camera } from 'featherity/vue';
 
-createIcons({
-  icons: {
-    Menu,
-    ArrowRight,
-    Globe,
-  },
-});
-```
-
-#### Additional Options
-
-In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
-
-Here is a full example:
-
-```js
-import { createIcons } from 'lucide';
-
-createIcons({
-  attrs: {
-    class: ['my-custom-class', 'icon'],
-    'stroke-width': 1,
-    stroke: '#333',
-  },
-  nameAttr: 'icon-name', // atrribute for the icon name.
-});
-```
-
-#### Threeshake the library, only use the icons you use
-
-```js
-import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
-
-createIcons({
-  icons: {
-    Menu,
-    ArrowRight,
-    Globe,
-  },
-});
-```
-
-#### Custom Element binding
-
-```js
-import { createElement, Menu } from 'lucide';
-
-const menuIcon = createElement(Menu); // Returns HTMLElement (svg)
-
-// set custom attributes with browser native functions
-menuIcon.setAttribute('stroke', '#333');
-menuIcon.classList.add('my-icon-class');
-
-// Append HTMLElement in webpage
-const myApp = document.getElementById('app');
-myApp.appendChild(menuIcon);
+export default {
+  name: "App",
+  components: {
+    Camera
+  }
+};
+</script>
 ```
 
 ### Figma
@@ -143,14 +77,15 @@ You can use the components from [this Figma file](https://www.figma.com/file/g0U
 
 ## Contributing
 
-For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md).
+For more info on how to contribute please see the [contribution guidelines](https://github.com/featherity/featherity/blob/master/CONTRIBUTING.md).
 
-Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/master/README.md)
+Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/featherity/featherity/blob/master/README.md)
 
 ## Community
 
-Join the community on our [Discord](https://discord.gg/EH6nSts) server!
+Do you want to join our community?
+Join us in [discord](https://discord.gg/EH6nSts)!
 
 ## License
 
-Lucide is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
+Feather is licensed under the [ISC License](https://github.com/featherity/featherity/blob/master/LICENSE).

babel.config.js

@@ -8,6 +8,7 @@ module.exports = {
       },
     ],
   ],
+  // plugins: ['babel-plugin-add-import-extension'],
   env: {
     test: {
       presets: ['@babel/env'],

docs/INKSCAPE_GUIDE.md

@@ -1,37 +0,0 @@
-# Inkscape Setup Guide
-
-This guide shows the steps to setup Inkscape for creating icons that conform to the Featherity design
-guidelines.
-
-## Setting up The Canvas
-
-When opening a new document, Inkscape will create a canvas of a default size.  To change the size to 24x24:
-
-1. Open the Document Properties dialog (File -> Document Properties).
-2. On the “Page Size” tab, under “Custom Size” set the Units to `px` and set both Height and Width to 24.
-![Setting Page Size](images/page-size.png?raw=true "Setting Page Size")
-3. On the “Grid” tab, select `Rectangular Grid` and click “New Grid”.
-![Setting Grid Properties](images/grid-1.png?raw=true "Setting Grid Properties")
-4. Set the Grid Units to `px` and set Spacing X and Spacing Y both to 1.
-![Setting Grid Properties](images/grid-2.png?raw=true "Setting Grid Properties")
-5. Close the Document Properties dialog.
-6. To center the canvas in the viewport, select View -> Zoom -> Drawing.
-   
-## Setting up The Paths
-
-1. Create a path or shape.
-2. With the path selected, open the Stroke and Fill panel by pressing `Ctrl+Shift+F` on your keyboard.
-![Stroke Style Properties](images/strokes.png?raw=true "Setting Grid Properties")
-3. On the “Stroke Style” tab:
-   * Set Stroke Width to `2px`. 
-   * Select the rounded join type.
-   * Select the rounded cap type.
-4. If the shape is a rectangle, select the rectangle and in the top of the screen below the menu bar, set `Rx` and `Ry` to `2px`.
-![Rectangle Radius Properties](images/corner-radius.png?raw=true "Rectangle Radius Properties")
-
-## Saving A File
-
-1. When ready to save the file, click Save As and select “Optimized SVG” as the file type.
-![Save As](images/save-as.png?raw=true "Save as")
-2. After clicking Save, to conform with the other icons in the package, set Pretty Printing to use spaces and set the indentation depth to 2.
-![Optimize](images/optimize-settings.png?raw=true "Optimize")

icons/bluetooth-connected.svg

@@ -1,15 +0,0 @@
-<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="M7 7L17 17L12 22V2L17 7L7 17" />
-  <line x1="18" y1="12" y2="12" x2="21" />
-  <line x1="3" y1="12" y2="12" x2="6" />
-</svg>

icons/bluetooth-off.svg

@@ -1,15 +0,0 @@
-<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="M17 17L12 22V12L7 17" />
-  <path d="M2 2L22 22" />
-  <path d="M14.5 9.5L17 7L12 2V6.5" />
-</svg>

icons/bluetooth-searching.svg

@@ -1,15 +0,0 @@
-<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="M7 7l10 10-5 5V2l5 5L7 17" />
-  <path d="M20.83 14.83a4 4 0 000-5.66" />
-  <path d="M18 12h.01"/>
-</svg>

icons/bluetooth.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 7L17 17L12 22V2L17 7L7 17" />
+  <polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5" />
 </svg>

icons/bot.svg

@@ -1,17 +0,0 @@
-<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="11" width="18" height="10" rx="2" />
-  <circle cx="12" cy="5" r="2" />
-  <path d="M12 7v4" />
-  <line x1="8" y1="16" x2="8" y2="16" />
-  <line x1="16" y1="16" x2="16" y2="16" />
-</svg>

icons/box-select.svg

@@ -1,24 +0,0 @@
-<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 2a2 2 0 00-2 2" />
-  <line x1="8" y1="2" x2="10" y2="2" />
-  <line x1="14" y1="2" x2="16" y2="2" />
-  <path d="M4 22a2 2 0 01-2-2" />
-  <line x1="22" y1="8" x2="22" y2="10" />
-  <line x1="22" y1="14" x2="22" y2="16" />
-  <path d="M22 20a2 2 0 01-2 2" />
-  <line x1="14" y1="22" x2="16" y2="22" />
-  <line x1="8" y1="22" x2="10" y2="22" />
-  <path d="M20 2a2 2 0 012 2" />
-  <line x1="2" y1="14" x2="2" y2="16" />
-  <line x1="2" y1="8" x2="2" y2="10" />
-</svg>

icons/building.svg

@@ -1,23 +0,0 @@
-<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="16" height="20" rx="2" ry="2" />
-  <path d="M9 22v-4h6v4" />
-  <path d="M8 6h.01" />
-  <path d="M16 6h.01" />
-  <path d="M12 6h.01" />
-  <path d="M12 10h.01" />
-  <path d="M12 14h.01" />
-  <path d="M16 10h.01" />
-  <path d="M16 14h.01" />
-  <path d="M8 10h.01" />
-  <path d="M8 14h.01" />
-</svg>

icons/calculator.svg

@@ -1,22 +0,0 @@
-<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="16" height="20" rx="2" />
-  <line x1="8" x2="16" y1="6" y2="6" />
-  <line x1="16" x2="16" y1="14" y2="18" />
-  <path d="M16 10H16.01" />
-  <path d="M12 10H12.01" />
-  <path d="M8 10H8.01" />
-  <path d="M12 14H12.01" />
-  <path d="M8 14H8.01" />
-  <path d="M12 18H12.01" />
-  <path d="M8 18H8.01" />
-</svg>

icons/divide.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="12" cy="6" r="1" />
+  <circle cx="12" cy="6" r="2" />
   <line x1="5" y1="12" x2="19" y2="12" />
-  <circle cx="12" cy="18" r="1" />
+  <circle cx="12" cy="18" r="2" />
 </svg>

icons/equal-not.svg

@@ -1,15 +0,0 @@
-<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="5" y1="9" x2="19" y2="9" />
-  <line x1="5" y1="15" x2="19" y2="15" />
-  <line x1="19" y1="5" x2="5" y2="19" />
-</svg>

icons/equal.svg

@@ -1,14 +0,0 @@
-<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="5" y1="9" x2="19" y2="9" />
-  <line x1="5" y1="15" x2="19" y2="15" />
-</svg>

icons/gauge.svg

@@ -1,14 +0,0 @@
-<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 15l3.5-3.5"/>
-  <path d="M20.3 18c.4-1 .7-2.2.7-3.4C21 9.8 17 6 12 6s-9 3.8-9 8.6c0 1.2.3 2.4.7 3.4"/>
-</svg>

icons/heart.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20.42 4.58a5.4 5.4 0 00-7.65 0l-.77.78-.77-.78a5.4 5.4 0 00-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z" />
+  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
 </svg>

icons/image-off.svg

@@ -1,16 +0,0 @@
-<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 2l20 20" />
-  <path d="M9 3h10a2 2 0 012 2v10M3.59 3.59A2 2 0 003 5v14c0 1.1.9 2 2 2h14a2 2 0 001.41-.59" />
-  <path d="M9.56 9.56a1.5 1.5 0 01-2.12-2.12" />
-  <path d="M21 15l-5-5M5 21l8-8" />
-</svg>

icons/laptop.svg

@@ -1,13 +0,0 @@
-<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="M20 16V7a2 2 0 00-2-2H6a2 2 0 00-2 2v9m16 0H4m16 0l1.28 2.55a1 1 0 01-.9 1.45H3.62a1 1 0 01-.9-1.45L4 16" />
-</svg>

icons/lasso-select.svg

@@ -1,17 +0,0 @@
-<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="M7 22a5 5 0 01-2-4" />
-  <path d="M7 16.93c.96.43 1.96.74 2.99.91" />
-  <path d="M3.34 14A6.8 6.8 0 012 10c0-4.42 4.48-8 10-8s10 3.58 10 8a7.19 7.19 0 01-.33 2" />
-  <path d="M5 18a2 2 0 100-4 2 2 0 000 4z" />
-  <path d="M14.33 22h-.09a.35.35 0 01-.24-.32v-10a.34.34 0 01.33-.34c.08 0 .15.03.21.08l7.34 6a.33.33 0 01-.21.59h-4.49l-2.57 3.85a.35.35 0 01-.28.14v0z" />
-</svg>

icons/lasso.svg

@@ -1,15 +0,0 @@
-<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="M7 22a5 5 0 01-2-4" />
-  <path d="M3.3 14A6.8 6.8 0 012 10c0-4.4 4.5-8 10-8s10 3.6 10 8-4.5 8-10 8a12 12 0 01-5-1" />
-  <path d="M5 18a2 2 0 100-4 2 2 0 000 4z" />
-</svg>

icons/layout-dashboard.svg

@@ -1,16 +0,0 @@
-<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="3" width="7" height="9" />
-  <rect x="14" y="3" width="7" height="5" />
-  <rect x="14" y="12" width="7" height="9" />
-  <rect x="3" y="16" width="7" height="5" />
-</svg>

icons/lightbulb.svg

@@ -1,15 +0,0 @@
-<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="9" y1="18" x2="15" y2="18" />
-  <line x1="10" y1="22" x2="14" y2="22" />
-  <path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0018 8 6 6 0 006 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 018.91 14" />
-</svg>

icons/list-checks.svg

@@ -1,18 +0,0 @@
-<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="10" y1="6" x2="21" y2="6" />
-  <line x1="10" y1="12" x2="21" y2="12" />
-  <line x1="10" y1="18" x2="21" y2="18" />
-  <polyline points="3 6 4 7 6 5" />
-  <polyline points="3 12 4 13 6 11" />
-  <polyline points="3 18 4 19 6 17" />
-</svg>

icons/list-ordered.svg

@@ -1,18 +0,0 @@
-<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="10" y1="6" x2="21" y2="6" />
-  <line x1="10" y1="12" x2="21" y2="12" />
-  <line x1="10" y1="18" x2="21" y2="18" />
-  <path d="M4 6H5V10" />
-  <path d="M4 10H6" />
-  <path d="M6 18H4C4 17 6 16 6 15C6 13.9999 5 13.5 4 14" />
-</svg>

icons/mouse-pointer-2.svg

@@ -1,13 +0,0 @@
-<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 4l7.07 17 2.51-7.39L21 11.07Z" />
-</svg>

icons/move-diagonal-2.svg

@@ -1,15 +0,0 @@
-<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"
->
-  <polyline points="5 11 5 5 11 5" />
-  <polyline points="19 13 19 19 13 19" />
-  <line x1="5" y1="5" x2="19" y2="19" />
-</svg>

icons/move-diagonal.svg

@@ -1,15 +0,0 @@
-<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"
->
-  <polyline points="13 5 19 5 19 11" />
-  <polyline points="11 19 5 19 5 13" />
-  <line x1="19" y1="5" x2="5" y2="19" />
-</svg>

icons/move-horizontal.svg

@@ -1,16 +0,0 @@
-
-<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"
->
-  <polyline points="18 8 22 12 18 16" />
-  <polyline points="6 8 2 12 6 16" />
-  <line x1="2" y1="12" x2="22" y2="12" />
-</svg>

icons/move-vertical.svg

@@ -1,15 +0,0 @@
-<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"
->
-  <polyline points="8 18 12 22 16 18" />
-  <polyline points="8 6 12 2 16 6" />
-  <line x1="12" y1="2" x2="12" y2="22" />
-</svg>

icons/separator-horizontal.svg

@@ -1,15 +0,0 @@
-<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="3" y1="12" x2="21" y2="12" />
-  <polyline points="8 8 12 4 16 8" />
-  <polyline points="16 16 12 20 8 16" />
-</svg>

icons/separator-vertical.svg

@@ -1,15 +0,0 @@
-<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="12" y1="3" x2="12" y2="21" />
-  <polyline points="8 8 4 12 8 16" />
-  <polyline points="16 16 20 12 16 8" />
-</svg>

icons/shirt.svg

@@ -1,13 +0,0 @@
-<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="M20.38 3.46L16 2a4 4 0 01-8 0L3.62 3.46a2 2 0 00-1.34 2.23l.58 3.47a1 1 0 00.99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 002-2V10h2.15a1 1 0 00.99-.84l.58-3.47a2 2 0 00-1.34-2.23z"/>
-</svg>

icons/wifi-off.svg

@@ -9,11 +9,11 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="2" y1="2" x2="22" y2="22" />
-  <path d="M8.5 16.5a5 5 0 017 0" />
-  <path d="M2 8.82a15 15 0 014.17-2.65" />
-  <path d="M10.66 5c4.01-.36 8.14.9 11.34 3.76" />
-  <path d="M16.85 11.25a10 10 0 012.22 1.68" />
-  <path d="M5 13a10 10 0 015.24-2.76" />
+  <line x1="1" y1="1" x2="23" y2="23" />
+  <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55" />
+  <path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39" />
+  <path d="M10.71 5.05A16 16 0 0 1 22.58 9" />
+  <path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88" />
+  <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
   <line x1="12" y1="20" x2="12.01" y2="20" />
 </svg>

icons/wifi.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M5 13a10 10 0 0114 0" />
-  <path d="M8.5 16.5a5 5 0 017 0" />
-  <path d="M2 8.82a15 15 0 0120 0" />
+  <path d="M5 12.55a11 11 0 0 1 14.08 0" />
+  <path d="M1.42 9a16 16 0 0 1 21.16 0" />
+  <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
   <line x1="12" y1="20" x2="12.01" y2="20" />
 </svg>

jest.config.js

@@ -1,14 +0,0 @@
-const esModules = ['lodash-es'].join('|');
-
-module.exports = {
-  verbose: true,
-  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
-  moduleFileExtensions: ['js'],
-  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
-  transform: {
-    '^.+\\.js$': 'babel-jest',
-  },
-};

netlify.toml

@@ -1,4 +0,0 @@
-[build]
-  base = "site/"
-  publish = "build/"
-  command = "yarn deploy"

package.json

@@ -1,28 +1,25 @@
 {
-  "name": "lucide",
-  "description": "Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
-  "version": "0.1.2",
+  "name": "featherity",
+  "amdName": "featherity",
   "license": "ISC",
-  "amdName": "lucide",
-  "homepage": "https://lucide.netlify.app",
-  "url": "https://github.com/owner/project/issues",
-  "repository": "github:lucide-icons/lucide",
-  "source": "build/lucide.js",
-  "main": "dist/cjs/lucide.js",
-  "main:umd": "dist/umd/lucide.js",
-  "module": "dist/esm/lucide.js",
-  "unpkg": "dist/umd/lucide.min.js",
+  "version": "0.1.0-alpha.0",
+  "private": true,
+  "source": "build/featherity.js",
+  "main": "dist/cjs/featherity.js",
+  "main:umd": "dist/umd/featherity.js",
+  "module": "lib/featherity.js",
+  "unpkg": "dist/umd/featherity.min.js",
   "sideEffects": false,
   "scripts": {
     "start": "babel-watch --watch src",
     "clean": "rimraf lib && rimraf dist && rimraf build",
-    "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles",
-    "build:move": "cp -av src build",
+    "build": "yarn clean && yarn build:transpile && yarn build:icons && yarn build:es && yarn build:esbrowser && yarn build:bundles",
+    "build:transpile": "babel src -d build",
     "build:icons": "npx babel-node ./scripts/buildIcons.js --presets @babel/env",
-    "build:es": "babel build -d dist/esm --ignore '**/*.test.js','**/__mocks__'",
+    "build:es": "babel build -d lib --source-maps --ignore '**/*.test.js','**/__mocks__'",
+    "build:esbrowser": "BROWSER_COMPAT=true yarn build:es -d dist/esm",
     "build:bundles": "rollup -c rollup.config.js",
-    "optimize": "npx babel-node ./scripts/optimizeSvgs.js --presets @babel/env",
-    "test": "jest"
+    "optimize": "npx babel-node ./scripts/optimizeSvgs.js --presets @babel/env"
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "^0.25.2",
@@ -32,7 +29,7 @@
     "@babel/node": "^7.10.5",
     "@babel/preset-env": "^7.11.0",
     "@rollup/plugin-babel": "^5.0.0",
-    "babel-jest": "^26.3.0",
+    "@rollup/plugin-replace": "^2.3.2",
     "babel-plugin-add-import-extension": "^1.4.3",
     "cheerio": "^1.0.0-rc.2",
     "eslint": "^4.19.1",
@@ -41,23 +38,24 @@
     "eslint-plugin-import": "^2.5.0",
     "eslint-plugin-prettier": "^2.5.0",
     "html-minifier": "^3.5.8",
-    "jest": "^26.4.2",
-    "lodash": "^4.17.19",
+    "lint-staged": "^6.0.0",
+    "microbundle": "^0.12.3",
     "prettier": "^1.8.2",
     "rollup": "^2.7.3",
     "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-flow-entry": "^0.3.3",
     "rollup-plugin-license": "^2.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^5.2.0",
     "rollup-plugin-visualizer": "^4.1.0",
+    "semantic-release": "^12.2.2",
     "svgo": "^1.3.2"
   },
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.11.5",
     "core-js": "3",
     "htmlparser2": "^4.1.0",
-    "lodash-es": "^4.17.15",
-    "prop-types": "^15.7.2"
+    "lodash": "^4.17.19",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1"
   }
 }

packages/js/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions"]
+        }
+      }
+    ],
+    "stage-2"
+  ]
+}

packages/js/.eslintignore

@@ -0,0 +1,2 @@
+dist
+coverage

packages/js/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["import", "prettier"],
+  "rules": {
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-param-reassign": "off",
+    "no-shadow": "off",
+    "no-use-before-define": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "trailingComma": "all"
+      }
+    ]
+  }
+}

packages/js/bin/__tests__/__snapshots__/build-icons-object.test.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`builds object correctly 1`] = `
+Object {
+  "icon1": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line>",
+  "icon2": "<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle>",
+}
+`;

packages/js/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`builds sprite correctly 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\"><defs><symbol id=\\"icon1\\" viewBox=\\"0 0 24 24\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></symbol><symbol id=\\"icon2\\" viewBox=\\"0 0 24 24\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle></symbol></defs></svg>"`;

packages/js/bin/__tests__/__snapshots__/process-svg.test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`processes SVG correctly 1`] = `
+"<svg
+  xmlns=\\"http://www.w3.org/2000/svg\\"
+  width=\\"24\\"
+  height=\\"24\\"
+  viewBox=\\"0 0 24 24\\"
+  fill=\\"none\\"
+  stroke=\\"currentColor\\"
+  stroke-width=\\"2\\"
+  stroke-linecap=\\"round\\"
+  stroke-linejoin=\\"round\\"
+>
+  <line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" />
+  <line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />
+</svg>
+"
+`;
+
+exports[`rejects when passed unparsable SVG string 1`] = `
+[Error: Error in parsing SVG: Unclosed root tag
+Line: 0
+Column: 10
+Char: ]
+`;

packages/js/bin/__tests__/build-icons-object.test.js

@@ -0,0 +1,17 @@
+/* eslint-env jest */
+import buildIconsObject from '../build-icons-object';
+
+const SVG_FILES = {
+  'icon1.svg':
+    '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="24"\n  height="24"\n  viewBox="0 0 24 24"\n>\n  <line x1="23" y1="1" x2="1" y2="23" />\n  <line x1="1" y1="1" x2="23" y2="23" />\n</svg>',
+  'icon2.svg':
+    '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="24"\n  height="24"\n  viewBox="0 0 24 24"\n>\n  <circle cx="12" cy="12" r="11" />\n</svg>',
+};
+
+function getSvg(svgFile) {
+  return SVG_FILES[svgFile];
+}
+
+test('builds object correctly', () => {
+  expect(buildIconsObject(Object.keys(SVG_FILES), getSvg)).toMatchSnapshot();
+});

packages/js/bin/__tests__/build-sprite-string.test.js

@@ -0,0 +1,12 @@
+/* eslint-env jest */
+import buildSpriteString from '../build-sprite-string';
+
+const icons = {
+  icon1:
+    '<line x1="23" y1="1" x2="1" y2="23"></line><line x1="1" y1="1" x2="23" y2="23"></line>',
+  icon2: '<circle cx="12" cy="12" r="11"></circle>',
+};
+
+test('builds sprite correctly', () => {
+  expect(buildSpriteString(icons)).toMatchSnapshot();
+});

packages/js/bin/__tests__/process-svg.test.js

@@ -0,0 +1,15 @@
+/* eslint-env jest */
+import processSvg from '../process-svg';
+
+test('processes SVG correctly', () => {
+  const SVG =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Title</title><line x1="23" y1="1" x2="1" y2="23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="1" y1="1" x2="23" y2="23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>';
+
+  expect(processSvg(SVG)).resolves.toMatchSnapshot();
+});
+
+test('rejects when passed unparsable SVG string', () => {
+  const UNPARSABLE_SVG = '<svg></svg';
+
+  expect(processSvg(UNPARSABLE_SVG)).rejects.toMatchSnapshot();
+});

packages/js/bin/build-icons-json.js

@@ -0,0 +1,19 @@
+import fs from 'fs';
+import path from 'path';
+
+import buildIconsObject from './build-icons-object';
+
+const IN_DIR = path.resolve(__dirname, '../icons');
+const OUT_FILE = path.resolve(__dirname, '../dist/icons.json');
+
+console.log(`Building ${OUT_FILE}...`);
+
+const svgFiles = fs
+  .readdirSync(IN_DIR)
+  .filter(file => path.extname(file) === '.svg');
+
+const getSvg = svgFile => fs.readFileSync(path.join(IN_DIR, svgFile));
+
+const icons = buildIconsObject(svgFiles, getSvg);
+
+fs.writeFileSync(OUT_FILE, JSON.stringify(icons));

packages/js/bin/build-icons-object.js

@@ -0,0 +1,35 @@
+import path from 'path';
+import cheerio from 'cheerio';
+import { minify } from 'html-minifier';
+
+/**
+ * Build an object in the format: `{ <name>: <contents> }`.
+ * @param {string[]} svgFiles - A list of filenames.
+ * @param {Function} getSvg - A function that returns the contents of an SVG file given a filename.
+ * @returns {Object}
+ */
+function buildIconsObject(svgFiles, getSvg) {
+  return svgFiles
+    .map(svgFile => {
+      const name = path.basename(svgFile, '.svg');
+      const svg = getSvg(svgFile);
+      const contents = getSvgContents(svg);
+      return { name, contents };
+    })
+    .reduce((icons, icon) => {
+      icons[icon.name] = icon.contents;
+      return icons;
+    }, {});
+}
+
+/**
+ * Get contents between opening and closing `<svg>` tags.
+ * @param {string} svg
+ * @returns {string}
+ */
+function getSvgContents(svg) {
+  const $ = cheerio.load(svg);
+  return minify($('svg').html(), { collapseWhitespace: true });
+}
+
+export default buildIconsObject;

packages/js/bin/build-sprite-string.js

@@ -0,0 +1,28 @@
+import DEFAULT_ATTRS from '../src/default-attrs.json';
+
+/**
+ * Build an SVG sprite string containing SVG symbols.
+ * @param {Object} icons
+ * @returns {string}
+ */
+function buildSpriteString(icons) {
+  const symbols = Object.keys(icons)
+    .map(icon => toSvgSymbol(icon, icons[icon]))
+    .join('');
+
+  return `<svg xmlns="${DEFAULT_ATTRS.xmlns}"><defs>${symbols}</defs></svg>`;
+}
+
+/**
+ * Create an SVG symbol string.
+ * @param {string} name - Icon name
+ * @param {string} contents - SVG contents
+ * @returns {string}
+ */
+function toSvgSymbol(name, contents) {
+  return `<symbol id="${name}" viewBox="${DEFAULT_ATTRS.viewBox}">${
+    contents
+  }</symbol>`;
+}
+
+export default buildSpriteString;

packages/js/bin/build-sprite.js

@@ -0,0 +1,10 @@
+import fs from 'fs';
+import path from 'path';
+import icons from '../dist/icons.json';
+import buildSpriteString from './build-sprite-string';
+
+const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg');
+
+console.log(`Building ${OUT_FILE}...`);
+
+fs.writeFileSync(OUT_FILE, buildSpriteString(icons));

packages/js/bin/build-svgs.js

@@ -0,0 +1,13 @@
+import fs from 'fs';
+import path from 'path';
+import icons from '../src/icons';
+
+const OUT_DIR = path.resolve(__dirname, '../dist/icons');
+
+console.log(`Building SVGs in ${OUT_DIR}...`);
+
+Object.keys(icons).forEach(name => {
+  const svg = icons[name].toSvg();
+
+  fs.writeFileSync(path.join(OUT_DIR, `${name}.svg`), svg);
+});

packages/js/bin/build.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+# Process SVG files
+npx babel-node bin/process-svgs.js
+
+# Create dist directory
+npx rimraf dist
+mkdir dist
+
+# Build icons.json
+npx babel-node bin/build-icons-json.js
+
+# Build SVG sprite
+npx babel-node bin/build-sprite.js
+
+# Create dist/icons directory
+npx rimraf dist/icons
+mkdir dist/icons
+
+# Build SVG icons
+npx babel-node bin/build-svgs.js
+
+# Build JavaScript library
+npx webpack --output-filename feather.js --mode development
+npx webpack --output-filename feather.min.js --mode production

packages/js/bin/process-svg.js

@@ -0,0 +1,58 @@
+import Svgo from 'svgo';
+import cheerio from 'cheerio';
+import { format } from 'prettier';
+
+import DEFAULT_ATTRS from '../src/default-attrs.json';
+
+/**
+ * Process SVG string.
+ * @param {string} svg - An SVG string.
+ * @param {Promise<string>}
+ */
+function processSvg(svg) {
+  return (
+    optimize(svg)
+      .then(setAttrs)
+      .then(format)
+      // remove semicolon inserted by prettier
+      // because prettier thinks it's formatting JSX not HTML
+      .then(svg => svg.replace(/;/g, ''))
+  );
+}
+
+/**
+ * Optimize SVG with `svgo`.
+ * @param {string} svg - An SVG string.
+ * @returns {Promise<string>}
+ */
+function optimize(svg) {
+  const svgo = new Svgo({
+    plugins: [
+      { convertShapeToPath: false },
+      { mergePaths: false },
+      { removeAttrs: { attrs: '(fill|stroke.*)' } },
+      { removeTitle: true },
+    ],
+  });
+
+  return new Promise(resolve => {
+    svgo.optimize(svg, ({ data }) => resolve(data));
+  });
+}
+
+/**
+ * Set default attibutes on SVG.
+ * @param {string} svg - An SVG string.
+ * @returns {string}
+ */
+function setAttrs(svg) {
+  const $ = cheerio.load(svg);
+
+  Object.keys(DEFAULT_ATTRS).forEach(key =>
+    $('svg').attr(key, DEFAULT_ATTRS[key]),
+  );
+
+  return $('body').html();
+}
+
+export default processSvg;

packages/js/bin/process-svgs.js

@@ -0,0 +1,18 @@
+import fs from 'fs';
+import path from 'path';
+
+import processSvg from './process-svg';
+
+const IN_DIR = path.resolve(__dirname, '../icons');
+
+console.log(`Processing SVGs in ${IN_DIR}...`);
+
+fs
+  .readdirSync(IN_DIR)
+  .filter(file => path.extname(file) === '.svg')
+  .forEach(svgFile => {
+    const svg = fs.readFileSync(path.join(IN_DIR, svgFile));
+    processSvg(svg).then(svg =>
+      fs.writeFileSync(path.join(IN_DIR, svgFile), svg),
+    );
+  });

packages/js/bin/sync-algolia.js

@@ -0,0 +1,73 @@
+import algolia from 'algoliasearch';
+import icons from '../dist/icons.json';
+import tags from '../src/tags.json';
+
+const ALGOLIA_APP_ID = '5EEOG744D0';
+
+if (
+  process.env.TRAVIS_PULL_REQUEST === 'false' &&
+  process.env.TRAVIS_BRANCH === 'master'
+) {
+  syncAlgolia();
+} else {
+  console.log('Skipped Algolia sync.');
+}
+
+function syncAlgolia() {
+  // ALGOLIA_ADMIN_KEY must be added as an environment variable in Travis CI
+  const client = algolia(ALGOLIA_APP_ID, process.env.ALGOLIA_ADMIN_KEY);
+
+  console.log('Initializing target and temporary indexes...');
+  const index = client.initIndex('icons');
+  const indexTmp = client.initIndex('icons_tmp');
+
+  console.log(
+    "Copying target index's settings, synonyms and rules into temporary index...",
+  );
+  scopedCopyIndex(client, index.indexName, indexTmp.indexName)
+    .then(() => {
+      const objects = Object.keys(icons).map(name => ({
+        name,
+        tags: tags[name] || [],
+      }));
+
+      console.log('Adding objects to the temporary index...');
+      return addObjects(indexTmp, objects);
+    })
+    .then(() => {
+      console.log('Moving temporary index to target index...');
+      return moveIndex(client, indexTmp.indexName, index.indexName);
+    });
+}
+
+function scopedCopyIndex(
+  client,
+  indexNameSrc,
+  indexNameDest,
+  scope = ['settings', 'synonyms', 'rules'],
+) {
+  return new Promise((resolve, reject) => {
+    client.copyIndex(indexNameSrc, indexNameDest, scope, (error, contents) => {
+      if (error) reject(error);
+      resolve(contents);
+    });
+  });
+}
+
+function addObjects(index, objects) {
+  return new Promise((resolve, reject) => {
+    index.addObjects(objects, (error, contents) => {
+      if (error) reject(error);
+      resolve(contents);
+    });
+  });
+}
+
+function moveIndex(client, indexNameSrc, indexNameDest) {
+  return new Promise((resolve, reject) => {
+    client.moveIndex(indexNameSrc, indexNameDest, (error, contents) => {
+      if (error) reject(error);
+      resolve(contents);
+    });
+  });
+}

packages/js/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "feather-icons",
+  "version": "0.0.0-development",
+  "description": "Simply beautiful open source icons",
+  "main": "dist/feather.js",
+  "unpkg": "dist/feather.min.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "all": "npm-run-all --sequential build lint test:coverage",
+    "build": "./bin/build.sh",
+    "lint": "eslint .",
+    "test": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "cm": "git-cz",
+    "precommit": "lint-staged",
+    "commitmsg": "commitlint --edit"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.js"
+    ]
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "core-js": "^3.1.3"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^5.2.5",
+    "@commitlint/config-conventional": "^6.1.3",
+    "algoliasearch": "^3.27.1",
+    "babel-cli": "^6.24.1",
+    "babel-loader": "^7.1.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "cheerio": "^1.0.0-rc.2",
+    "commitizen": "^2.9.6",
+    "cz-conventional-changelog": "^2.1.0",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-import": "^2.5.0",
+    "eslint-plugin-prettier": "^2.5.0",
+    "html-minifier": "^3.5.8",
+    "husky": "^0.14.3",
+    "jest": "^22.4.4",
+    "lint-staged": "^6.0.0",
+    "npm-run-all": "^4.1.2",
+    "prettier": "^1.8.2",
+    "semantic-release": "^12.2.2",
+    "svgo": "^0.7.2",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/feathericons/feather.git"
+  },
+  "author": "Cole Bemis <cole@colebemis.com> (http://colebemis.com)",
+  "license": "MIT"
+}

packages/js/src/__tests__/__snapshots__/icon.test.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`constructs icon object correctly 1`] = `
+Icon {
+  "attrs": Object {
+    "class": "feather feather-test",
+    "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",
+  },
+  "contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
+  "name": "test",
+  "tags": Array [
+    "hello",
+    "world",
+    "foo",
+    "bar",
+  ],
+}
+`;
+
+exports[`constructs icon object correctly 2`] = `
+Icon {
+  "attrs": Object {
+    "class": "feather feather-test",
+    "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",
+  },
+  "contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
+  "name": "test",
+  "tags": Array [],
+}
+`;
+
+exports[`toString() returns correct string 1`] = `"<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />"`;
+
+exports[`toSvg() returns correct string 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
+
+exports[`toSvg() returns correct string 2`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-test\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
+
+exports[`toSvg() returns correct string 3`] = `"<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\\" class=\\"feather feather-test foo bar\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;

packages/js/src/__tests__/__snapshots__/icons.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`exports correct object 1`] = `
+Object {
+  "icon1": Icon {
+    "attrs": Object {
+      "class": "feather feather-icon1",
+      "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",
+    },
+    "contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
+    "name": "icon1",
+    "tags": Array [
+      "foo",
+      "bar",
+      "hello",
+      "world",
+    ],
+  },
+  "icon2": Icon {
+    "attrs": Object {
+      "class": "feather feather-icon2",
+      "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",
+    },
+    "contents": "<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\" />",
+    "name": "icon2",
+    "tags": Array [],
+  },
+}
+`;

packages/js/src/__tests__/__snapshots__/replace.node.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`throws an error when run in node environment 1`] = `"\`feather.replace()\` only works in a browser environment."`;

packages/js/src/__tests__/__snapshots__/replace.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`copies placeholder element attributes to <svg> tag 1`] = `"<i data-feather=\\"icon1\\" id=\\"test\\" class=\\"foo bar\\" stroke-width=\\"1\\"></i>"`;
+
+exports[`copies placeholder element attributes to <svg> tag 2`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-icon1 foo bar\\" id=\\"test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg>"`;
+
+exports[`replaces [data-feather] elements with SVG markup 1`] = `"<i data-feather=\\"icon1\\"></i><span data-feather=\\"icon2\\"></span>"`;
+
+exports[`replaces [data-feather] elements with SVG markup 2`] = `"<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\\" class=\\"feather feather-icon1\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-icon2\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle></svg>"`;
+
+exports[`sets attributes passed as parameters 1`] = `"<i data-feather=\\"icon1\\" id=\\"test\\" class=\\"foo bar\\" stroke-width=\\"1\\"></i>"`;
+
+exports[`sets attributes passed as parameters 2`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-icon1 foo bar hello\\" color=\\"salmon\\" id=\\"test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg>"`;

packages/js/src/__tests__/__snapshots__/to-svg.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`returns correct string 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-icon1\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
+
+exports[`returns correct string 2`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-icon1\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
+
+exports[`returns correct string 3`] = `"<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\\" class=\\"feather feather-icon1 foo bar\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;

packages/js/src/__tests__/icon.test.js

@@ -0,0 +1,28 @@
+/* eslint-env jest */
+import Icon from '../icon';
+
+const icon1 = new Icon(
+  'test',
+  '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+  ['hello', 'world', 'foo', 'bar'],
+);
+
+const icon2 = new Icon(
+  'test',
+  '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+);
+
+test('constructs icon object correctly', () => {
+  expect(icon1).toMatchSnapshot();
+  expect(icon2).toMatchSnapshot();
+});
+
+test('toSvg() returns correct string', () => {
+  expect(icon1.toSvg()).toMatchSnapshot();
+  expect(icon1.toSvg({ 'stroke-width': 1, color: 'red' })).toMatchSnapshot();
+  expect(icon1.toSvg({ class: 'foo bar', color: 'red' })).toMatchSnapshot();
+});
+
+test('toString() returns correct string', () => {
+  expect(icon1.toString()).toMatchSnapshot();
+});

packages/js/src/__tests__/icons.test.js

@@ -0,0 +1,16 @@
+/* eslint-env jest */
+import icons from '../icons';
+
+jest.mock('../../dist/icons.json', () => ({
+  icon1:
+    '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+  icon2: '<circle cx="12" cy="12" r="11" />',
+}));
+
+jest.mock('../tags.json', () => ({
+  icon1: ['foo', 'bar', 'hello', 'world'],
+}));
+
+test('exports correct object', () => {
+  expect(icons).toMatchSnapshot();
+});

packages/js/src/__tests__/index.test.js

@@ -0,0 +1,8 @@
+/* eslint-env jest */
+import feather from '../index';
+
+test('has correct properties', () => {
+  expect(feather).toHaveProperty('icons');
+  expect(feather).toHaveProperty('toSvg');
+  expect(feather).toHaveProperty('replace');
+});

packages/js/src/__tests__/replace.node.test.js

@@ -0,0 +1,10 @@
+/**
+ * @jest-environment node
+ */
+
+/* eslint-env jest */
+import replace from '../replace';
+
+test('throws an error when run in node environment', () => {
+  expect(replace).toThrowErrorMatchingSnapshot();
+});

packages/js/src/__tests__/replace.test.js

@@ -0,0 +1,32 @@
+/* eslint-env jest, browser */
+import replace from '../replace';
+
+jest.mock('../../dist/icons.json', () => ({
+  icon1:
+    '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+  icon2: '<circle cx="12" cy="12" r="11" />',
+}));
+
+test('replaces [data-feather] elements with SVG markup', () => {
+  document.body.innerHTML =
+    '<i data-feather="icon1"></i><span data-feather="icon2"></i>';
+  expect(document.body.innerHTML).toMatchSnapshot();
+  replace();
+  expect(document.body.innerHTML).toMatchSnapshot();
+});
+
+test('copies placeholder element attributes to <svg> tag', () => {
+  document.body.innerHTML =
+    '<i data-feather="icon1" id="test" class="foo bar" stroke-width="1"></i>';
+  expect(document.body.innerHTML).toMatchSnapshot();
+  replace();
+  expect(document.body.innerHTML).toMatchSnapshot();
+});
+
+test('sets attributes passed as parameters', () => {
+  document.body.innerHTML =
+    '<i data-feather="icon1" id="test" class="foo bar" stroke-width="1"></i>';
+  expect(document.body.innerHTML).toMatchSnapshot();
+  replace({ class: 'foo bar hello', 'stroke-width': 1.5, color: 'salmon' });
+  expect(document.body.innerHTML).toMatchSnapshot();
+});

packages/js/src/__tests__/to-svg.test.js

@@ -0,0 +1,21 @@
+/* eslint-env jest */
+import toSvg from '../to-svg';
+
+jest.mock('../../dist/icons.json', () => ({
+  icon1:
+    '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+}));
+
+test('returns correct string', () => {
+  expect(toSvg('icon1')).toMatchSnapshot();
+  expect(toSvg('icon1', { 'stroke-width': 1, color: 'red' })).toMatchSnapshot();
+  expect(toSvg('icon1', { class: 'foo bar', color: 'red' })).toMatchSnapshot();
+});
+
+test('throws error when `name` parameter is undefined', () => {
+  expect(() => toSvg()).toThrow();
+});
+
+test('throws error when passed unknown icon name', () => {
+  expect(() => toSvg('foo')).toThrow();
+});

packages/js/src/default-attrs.json

@@ -0,0 +1,11 @@
+{
+  "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"
+}

packages/js/src/icon.js

@@ -0,0 +1,55 @@
+import classnames from 'classnames/dedupe';
+
+import DEFAULT_ATTRS from './default-attrs.json';
+
+class Icon {
+  constructor(name, contents, tags = []) {
+    this.name = name;
+    this.contents = contents;
+    this.tags = tags;
+    this.attrs = {
+      ...DEFAULT_ATTRS,
+      ...{ class: `feather feather-${name}` },
+    };
+  }
+
+  /**
+   * Create an SVG string.
+   * @param {Object} attrs
+   * @returns {string}
+   */
+  toSvg(attrs = {}) {
+    const combinedAttrs = {
+      ...this.attrs,
+      ...attrs,
+      ...{ class: classnames(this.attrs.class, attrs.class) },
+    };
+
+    return `<svg ${attrsToString(combinedAttrs)}>${this.contents}</svg>`;
+  }
+
+  /**
+   * Return string representation of an `Icon`.
+   *
+   * Added for backward compatibility. If old code expects `feather.icons.<name>`
+   * to be a string, `toString()` will get implicitly called.
+   *
+   * @returns {string}
+   */
+  toString() {
+    return this.contents;
+  }
+}
+
+/**
+ * Convert attributes object to string of HTML attributes.
+ * @param {Object} attrs
+ * @returns {string}
+ */
+function attrsToString(attrs) {
+  return Object.keys(attrs)
+    .map(key => `${key}="${attrs[key]}"`)
+    .join(' ');
+}
+
+export default Icon;

packages/js/src/icons.js

@@ -0,0 +1,10 @@
+import Icon from './icon';
+import icons from '../dist/icons.json';
+import tags from './tags.json';
+
+export default Object.keys(icons)
+  .map(key => new Icon(key, icons[key], tags[key]))
+  .reduce((object, icon) => {
+    object[icon.name] = icon;
+    return object;
+  }, {});

packages/js/src/index.js

@@ -0,0 +1,5 @@
+import icons from './icons';
+import toSvg from './to-svg';
+import replace from './replace';
+
+module.exports = { icons, toSvg, replace };

packages/js/src/replace.js

@@ -0,0 +1,60 @@
+/* eslint-env browser */
+import classnames from 'classnames/dedupe';
+
+import icons from './icons';
+
+/**
+ * Replace all HTML elements that have a `data-feather` attribute with SVG markup
+ * corresponding to the element's `data-feather` attribute value.
+ * @param {Object} attrs
+ */
+function replace(attrs = {}) {
+  if (typeof document === 'undefined') {
+    throw new Error('`feather.replace()` only works in a browser environment.');
+  }
+
+  const elementsToReplace = document.querySelectorAll('[data-feather]');
+
+  Array.from(elementsToReplace).forEach(element =>
+    replaceElement(element, attrs),
+  );
+}
+
+/**
+ * Replace a single HTML element with SVG markup
+ * corresponding to the element's `data-feather` attribute value.
+ * @param {HTMLElement} element
+ * @param {Object} attrs
+ */
+function replaceElement(element, attrs = {}) {
+  const elementAttrs = getAttrs(element);
+  const name = elementAttrs['data-feather'];
+  delete elementAttrs['data-feather'];
+
+  const svgString = icons[name].toSvg({
+    ...attrs,
+    ...elementAttrs,
+    ...{ class: classnames(attrs.class, elementAttrs.class) },
+  });
+  const svgDocument = new DOMParser().parseFromString(
+    svgString,
+    'image/svg+xml',
+  );
+  const svgElement = svgDocument.querySelector('svg');
+
+  element.parentNode.replaceChild(svgElement, element);
+}
+
+/**
+ * Get the attributes of an HTML element.
+ * @param {HTMLElement} element
+ * @returns {Object}
+ */
+function getAttrs(element) {
+  return Array.from(element.attributes).reduce((attrs, attr) => {
+    attrs[attr.name] = attr.value;
+    return attrs;
+  }, {});
+}
+
+export default replace;

packages/js/src/tags.json

@@ -25,7 +25,6 @@
   "bookmark": ["read", "clip", "marker", "tag"],
   "box": ["cube"],
   "briefcase": ["work", "bag", "baggage", "folder"],
-  "building": ["organisation"],
   "calendar": ["date"],
   "camera": ["photo"],
   "cast": ["chromecast", "airplay"],
@@ -101,7 +100,6 @@
   "inbox": ["email"],
   "instagram": ["logo", "camera"],
   "key": ["password", "login", "authentication", "secure"],
-  "laptop": ["computer"],
   "layers": ["stack"],
   "layout": ["window", "webpage"],
   "life-bouy": ["help", "life ring", "support"],

packages/js/src/to-svg.js

@@ -0,0 +1,30 @@
+import icons from './icons';
+
+/**
+ * Create an SVG string.
+ * @deprecated
+ * @param {string} name
+ * @param {Object} attrs
+ * @returns {string}
+ */
+function toSvg(name, attrs = {}) {
+  console.warn(
+    'feather.toSvg() is deprecated. Please use feather.icons[name].toSvg() instead.',
+  );
+
+  if (!name) {
+    throw new Error('The required `key` (icon name) parameter is missing.');
+  }
+
+  if (!icons[name]) {
+    throw new Error(
+      `No icon matching '${
+        name
+      }'. See the complete list of icons at https://feathericons.com`,
+    );
+  }
+
+  return icons[name].toSvg(attrs);
+}
+
+export default toSvg;

packages/js/webpack.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+
+module.exports = {
+  entry: ['core-js/es/array/from', path.resolve(__dirname, 'src/index.js')],
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    libraryTarget: 'umd',
+    library: 'feather',
+    // Prevents webpack from referencing `window` in the UMD build
+    // Source: https://git.io/vppgU
+    globalObject: "typeof self !== 'undefined' ? self : this",
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+};

packages/react/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "lucide-react",
+  "name": "react-featherity",
   "version": "1.0.0",
-  "description": "React component for lucide icons",
+  "description": "React component for Featherity icons",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "author": "John Letey",

rollup.config.js

@@ -1,34 +1,21 @@
 import babel from '@rollup/plugin-babel';
+import replace from '@rollup/plugin-replace';
 import bundleSize from '@atomico/rollup-plugin-sizes';
 import compiler from '@ampproject/rollup-plugin-closure-compiler';
 import { terser } from 'rollup-plugin-terser';
 import visualizer from 'rollup-plugin-visualizer';
 import license from 'rollup-plugin-license';
-import replace from 'rollup-plugin-replace';
 import resolve from 'rollup-plugin-node-resolve';
 import commonJS from 'rollup-plugin-commonjs';
 import pkg from './package.json';
 
 const outputFileName = pkg.name;
 
-const inputs = ['build/lucide.js'];
+const inputs = ['build/featherity.js'];
 const bundles = [
-  {
-    inputs,
-    format: 'umd',
-    dir: 'dist',
-    minify: true,
-  },
-  {
-    inputs,
-    format: 'umd',
-    dir: 'dist',
-  },
-  {
-    inputs,
-    format: 'cjs',
-    dir: 'dist',
-  },
+  { inputs, format: 'umd', dir: 'dist', minify: true },
+  { inputs, format: 'umd', dir: 'dist' },
+  { inputs, format: 'cjs', dir: 'dist' },
 ];
 
 const configs = bundles
@@ -37,19 +24,15 @@ const configs = bundles
       input,
       external: ['lodash/camelCase', 'lodash/upperFirst'],
       plugins: [
-        replace({
-          'icons = {}': 'icons = allIcons',
-          delimiters: ['', ''],
-        }),
-        babel({
-          babelHelpers: 'bundled',
-        }),
+        format === 'umd' &&
+          replace({
+            __DEV__: minify ? 'false' : 'true',
+          }),
+        babel({ babelHelpers: 'bundled' }),
         // The two minifiers together seem to procude a smaller bundle 🤷‍♂️
         minify && compiler(),
         minify && terser(),
-        license({
-          banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
-        }),
+        license({ banner: `${pkg.name} v${pkg.version} - ${pkg.license}` }),
         bundleSize(),
         resolve(),
         commonJS({
@@ -61,10 +44,11 @@ const configs = bundles
         }),
       ].filter(Boolean),
       output: {
-        name: 'lucide',
+        name: 'featherity',
         file: `${dir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
         format,
         sourcemap: true,
+        exports: 'named',
         globals: {
           'lodash/camelCase': 'camelCase',
           'lodash/upperFirst': 'upperFirst',

scripts/build/generateExportsFile.js

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import { generateComponentName, resetFile, appendFile } from '../helpers';
+import { generateComponentName, resetFile, writeFile, readFile } from './helpers';
 
 export default function(inputEntry, outputDirectory, componentGetter, iconNodes) {
   const fileName = path.basename(inputEntry);
@@ -14,10 +14,10 @@ export default function(inputEntry, outputDirectory, componentGetter, iconNodes)
   icons.forEach(iconName => {
     const componentName = generateComponentName(iconName);
     const importString = `export { default as ${componentName} } from './${iconName}';\n`;
-    appendFile(importString, fileName, outputDirectory);
+    writeFile(importString, fileName, outputDirectory);
   });
 
-  appendFile('\n', fileName, outputDirectory);
+  writeFile('\n', fileName, outputDirectory);
 
   console.log(`Successfully generated ${fileName} file`);
 }

scripts/build/generateIconFiles.js

@@ -2,7 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import prettier from 'prettier';
-import { generateComponentName } from '../helpers';
+import { generateComponentName } from './helpers';
 
 export default function(iconNode, outputDirectory, template) {
   const icons = Object.keys(iconNode);

scripts/build/helpers.js

@@ -0,0 +1,37 @@
+import { upperFirst, camelCase } from 'lodash/string';
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Generates a componentName of a String.
+ *
+ * @param {string} iconName
+ */
+export const generateComponentName = iconName =>
+  iconName === 'github' ? 'GitHub' : upperFirst(camelCase(iconName));
+
+/**
+ * Resets the file contents.
+ *
+ * @param {string} fileName
+ * @param {string} outputDirectory
+ */
+export const resetFile = (fileName, outputDirectory) =>
+  fs.writeFileSync(path.join(outputDirectory, fileName), '', 'utf-8');
+
+/**
+ * Reads the file contents.
+ *
+ * @param {string} path
+ */
+export const readFile = entry => fs.readFileSync(path.resolve(__dirname, '../../', entry), 'utf-8');
+
+/**
+ * writes content to a file
+ *
+ * @param {string} content
+ * @param {string} fileName
+ * @param {string} outputDirectory
+ */
+export const writeFile = (content, fileName, outputDirectory) =>
+  fs.appendFileSync(path.join(outputDirectory, fileName), content, 'utf-8');

scripts/buildIcons.js

@@ -6,9 +6,7 @@ import renderIconNodes from './render/renderIconNodes';
 import generateIconFiles from './build/generateIconFiles';
 import generateExportsFile from './build/generateExportsFile';
 
-import { readSvgDirectory } from './helpers';
-
-const ICONS_DIR = path.resolve(__dirname, '../icons');
+const IN_DIR = path.resolve(__dirname, '../icons');
 const OUTPUT_DIR = path.resolve(__dirname, '../build');
 const SRC_DIR = path.resolve(__dirname, '../src');
 
@@ -16,10 +14,10 @@ if (!fs.existsSync(OUTPUT_DIR)) {
   fs.mkdirSync(OUTPUT_DIR);
 }
 
-const svgFiles = readSvgDirectory(ICONS_DIR);
-
-const icons = renderIconsObject(svgFiles, ICONS_DIR);
+const svgFiles = fs.readdirSync(IN_DIR).filter(file => path.extname(file) === '.svg');
+const getSvg = svgFile => fs.readFileSync(path.join(IN_DIR, svgFile));
 
+const icons = renderIconsObject(svgFiles, getSvg);
 const iconVNodes = renderIconNodes(icons);
 
 // Generates iconsNodes files for each icon
@@ -27,8 +25,11 @@ generateIconFiles(
   iconVNodes,
   OUTPUT_DIR,
   ({ componentName, node }) => `
+    import createElement from '../../src/createElement';
+
     const ${componentName} = ${node};
 
+    export const element = createElement('${componentName}', ${componentName});
     export default ${componentName};
   `,
 );

scripts/helpers.js

@@ -1,74 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { upperFirst, camelCase } from 'lodash/string';
-import fs from 'fs';
-import path from 'path';
-
-/**
- * Generates a componentName of a String.
- *
- * @param {string} iconName
- */
-export const generateComponentName = iconName =>
-  iconName === 'github' ? 'GitHub' : upperFirst(camelCase(iconName));
-
-/**
- * Resets the file contents.
- *
- * @param {string} fileName
- * @param {string} outputDirectory
- */
-export const resetFile = (fileName, outputDirectory) =>
-  fs.writeFileSync(path.join(outputDirectory, fileName), '', 'utf-8');
-
-/**
- * Reads the file contents.
- *
- * @param {string} path
- */
-export const readFile = entry => fs.readFileSync(path.resolve(__dirname, '../', entry), 'utf-8');
-
-/**
- * append content to a file
- *
- * @param {string} content
- * @param {string} fileName
- * @param {string} outputDirectory
- */
-export const appendFile = (content, fileName, outputDirectory) =>
-  fs.appendFileSync(path.join(outputDirectory, fileName), content, 'utf-8');
-
-/**
- * writes content to a file
- *
- * @param {string} content
- * @param {string} fileName
- * @param {string} outputDirectory
- */
-export const writeFile = (content, fileName, outputDirectory) =>
-  fs.writeFileSync(path.join(outputDirectory, fileName), content, 'utf-8');
-
-/**
- * reads the icon directory
- *
- * @param {string} directory
- */
-export const readSvgDirectory = directory =>
-  fs.readdirSync(directory).filter(file => path.extname(file) === '.svg');
-
-/**
- * Read svg from directory
- *
- * @param {string} fileName
- * @param {string} directory
- */
-export const readSvg = (fileName, directory) => fs.readFileSync(path.join(directory, fileName));
-
-/**
- * writes content to a file
- *
- * @param {string} fileName
- * @param {string} outputDirectory
- * @param {string} content
- */
-export const writeSvgFile = (fileName, outputDirectory, content) =>
-  fs.appendFileSync(path.join(outputDirectory, fileName), content, 'utf-8');

scripts/optimizeSvgs.js

@@ -1,15 +1,17 @@
 import fs from 'fs';
 import path from 'path';
 import processSvg from './render/processSvg';
-import { readSvgDirectory, writeSvgFile } from './helpers';
 
 const ICONS_DIR = path.resolve(__dirname, '../icons');
 
-console.log(`Optimizing SVGs...`);
+console.log(`Optimizing SVGs in ${ICONS_DIR}...`);
 
-const svgFiles = readSvgDirectory(ICONS_DIR);
+const svgFiles = fs.readdirSync(ICONS_DIR).filter(file => path.extname(file) === '.svg');
+console.log(svgFiles);
 
-svgFiles.forEach(svgFile => {
-  const content = fs.readFileSync(path.join(ICONS_DIR, svgFile));
-  processSvg(content).then(svg => writeSvgFile(svg, ICONS_DIR, content));
-});
+svgFiles
+  .filter(file => path.extname(file) === '.svg')
+  .forEach(svgFile => {
+    const svg = fs.readFileSync(path.join(ICONS_DIR, svgFile));
+    processSvg(svg).then(svg => fs.writeFileSync(path.join(ICONS_DIR, svgFile), svg));
+  });

scripts/render/renderIconsObject.js

@@ -2,7 +2,6 @@
 import path from 'path';
 import cheerio from 'cheerio';
 import { minify } from 'html-minifier';
-import { readSvg } from '../helpers';
 
 /**
  * Get contents between opening and closing `<svg>` tags.
@@ -21,11 +20,11 @@ function getSvgContents(svg) {
  * @param {Function} getSvg - A function that returns the contents of an SVG file given a filename.
  * @returns {Object}
  */
-export default (svgFiles, iconsDirectory) =>
+export default (svgFiles, getSvg) =>
   svgFiles
     .map(svgFile => {
       const name = path.basename(svgFile, '.svg');
-      const svg = readSvg(svgFile, iconsDirectory);
+      const svg = getSvg(svgFile);
       const contents = getSvgContents(svg);
       return { name, contents };
     })

site/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["next/babel"]
-}

site/.prettierignore

@@ -1 +0,0 @@
-.next

site/jest.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
-  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
-  transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/../../node_modules/babel-jest',
-  },
-};