feat: Add hexagon icon

feat: Update package icon
feat: Update box icon
2023-08-10 21:13:24 +03:00 · 2019-03-30 10:22:17 -07:00 · 2019-03-30 10:22:17 -07:00 · 2019-03-30 10:22:17 -07:00 · 2019-03-30 10:22:17 -07:00 · 2019-03-29 17:19:46 -07:00
332 changed files with 20838 additions and 1196 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,5 +1,13 @@
 {
  "presets": [
-    "es2015"
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions"]
+        }
+      }
+    ],
+    "stage-2"
  ]
 }
--- a/.eslintignore
+++ b/.eslintignore
@ -1 +1,2 @@
-dist
+dist
+coverage
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,12 +1,17 @@
 {
-  "extends": "airbnb-base",
-  "plugins": [
-    "import"
-  ],
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["import", "prettier"],
  "rules": {
-    "no-use-before-define": "off",
-    "arrow-parens": ["error", "as-needed"],
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-param-reassign": "off",
    "no-shadow": "off",
-    "no-console": ["error", { "allow": ["warn", "error"] }]
+    "no-use-before-define": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "trailingComma": "all"
+      }
+    ]
  }
 }
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -1,6 +0,0 @@
-> If you'd like to request an icon, please provide the following information:
-> - icon name
-> - at least one use case
-> - screenshots of similar icons
->
-> Please create one issue for each icon request.
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,67 @@
+---
+name: Bug report
+about: Create a report to help us improve
+---
+
+<!--
+Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
+-->
+
+## Prerequisites
+
+* Version:
+* Are you running from source/master:
+* Are you using a released build:
+* Operating system: 
+* Bits:
+
+## Step to reproduce
+
+*(Type here)*
+
+### Actual behavior
+
+## Any message or error
+
+*(Type here)*
+
+## Resources
+
+* Links
+* Screenshots
+
+
+Here is what a great bug report would look like:
+
+```
+## Prerequisites
+
+Version: Release v3.1.0
+Running from: Import using webpack
+Operating system: Mac OSX
+Bits: 64 bits
+
+## Step to reproduce
+
+ - Import `check` icon
+ - Add to a React component/view
+ - Run the react app
+ - Notice that the `check` isn't rendering correctly which seems a encoding problem
+ 
+### Actual behavior:
+
+ - Import `check` icon
+ - Add to a React component/view
+ - Run the react app
+ - Check is displayed with correct encoding (e.g UTF-8)
+
+## Any message or error
+
+No console output
+...
+
+## Resources
+
+No resources
+...
+```
--- a/.github/ISSUE_TEMPLATE/icon_request.md
+++ b/.github/ISSUE_TEMPLATE/icon_request.md
@ -0,0 +1,14 @@
+---
+name: Icon request
+about: Suggest an new icon for this project
+---
+
+<!--
+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 👍.
+-->
+
+## Icon Request
+
+* Icon name:
+* Use case:
+* Screenshots of similar icons:
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,4 @@ node_modules
 dist
 sandbox
 stash
+coverage
--- a/.lintstagedrc
+++ b/.lintstagedrc
@ -0,0 +1,3 @@
+{
+  "*.js": "eslint"
+}
--- a/.travis.yml
+++ b/.travis.yml
@ -4,10 +4,16 @@ cache:
    - node_modules
 notifications:
  email: false
-node_js: 6
+node_js: 8
 before_script:
  - npm prune
 script:
  - npm run all
 after_success:
-  - npm run semantic-release
+  - npx codecov
+  - npx babel-node ./bin/sync-algolia.js
+deploy:
+  provider: script
+  skip_cleanup: true
+  script:
+    - npx semantic-release
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -37,24 +37,36 @@ When creating a new issue make sure to include the following:
 - A screenshot of any visual bug.

 Here is what a great bug report would look like:
+
 ```
-Check not rendering properly
+## Prerequisites

 Version: Release v3.1.0
-Downloaded from: Import using webpack
-OS: Mac OSX
+Running from: Import using webpack
+Operating system: Mac OSX
+Bits: 64 bits
+
+## Step to reproduce

-How to reproduce:
 - Import `check` icon
 - Add to a React component/view
 - Run the react app
 - Notice that the `check` isn't rendering correctly which seems a encoding problem
-Actual result:
+ 
+### Actual behavior:
+
 - Import `check` icon
 - Add to a React component/view
 - Run the react app
 - Check is displayed with correct encoding (e.g UTF-8)

+## Any message or error
+
 No console output
 ...
+
+## Resources
+
+No resources
+...
 ```
--- a/31
+++ b/31
@ -1,31 +0,0 @@
-src_files := src/*.js
-src_dir   := src
-
-.PHONY: all lint build
-
-all: lint build
-
-lint: dist/icons.json
-	./node_modules/.bin/eslint .
-
-build: dist/feather.js dist/feather.min.js dist/icons
-
-node_modules:
-	npm install
-
-dist:
-	mkdir dist
-
-dist/icons.json: node_modules dist icons icons/*.svg
-	./node_modules/.bin/babel-node bin/build-json.js
-
-dist/feather.js: dist/icons.json $(src_dir) $(src_files)
-	./node_modules/.bin/webpack --output-filename feather.js
-
-dist/feather.min.js: dist/icons.json $(src_dir) $(src_files)
-	./node_modules/.bin/webpack --output-filename feather.min.js -p
-
-dist/icons: dist/icons.json
-	rm -rf dist/icons
-	mkdir -p dist/icons
-	./node_modules/.bin/babel-node bin/build-svgs.js
--- a/README.md
+++ b/README.md
@ -1,31 +1,41 @@
 # Feather

-[![Travis branch](https://img.shields.io/travis/colebemis/feather/master.svg?style=flat-square)](https://travis-ci.org/colebemis/feather)
-[![npm](https://img.shields.io/npm/v/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)
-[![npm](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://npm-stat.com/charts.html?package=feather-icons&from=2017-06-01)
-[![Code Climate](https://img.shields.io/codeclimate/github/colebemis/feather.svg?style=flat-square)](https://codeclimate.com/github/colebemis/feather)
+[![Build status](https://img.shields.io/travis/feathericons/feather/master.svg?style=flat-square)](https://travis-ci.org/feathericons/feather)
+[![Coverage](https://img.shields.io/codecov/c/github/feathericons/feather/master.svg?style=flat-square)](https://codecov.io/gh/feathericons/feather)
+[![npm downloads](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)
+[![npm version](https://img.shields.io/npm/v/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)
 [![CDNJS version](https://img.shields.io/cdnjs/v/feather-icons.svg?style=flat-square)](https://cdnjs.com/libraries/feather-icons)
+[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://www.paypal.me/colebemis/5)

 ## What is Feather?

-Feather is a collection of **simply beautiful open source icons**. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
+Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and usability.

-**[feathericons.com](https://feathericons.com)**
+https://feathericons.com

-```
+```shell
 npm install feather-icons
 ```

+**Sponsored by**
+
+<a href="https://stdlib.com">
+  <img src="https://stdlib.com/static/images/stdlib-logo-wordmark-128.png" width="128" />
+</a>
+
 ## Table of Contents

 * [Quick Start](#quick-start)
 * [Usage](#usage)
  * [Client-side JavaScript](#client-side-javascript)
  * [Node](#node)
+  * [SVG Sprite](#svg-sprite)
+  * [Figma](#figma)
 * [API Reference](#api-reference)
 	* [`feather.icons`](#feathericons)
-	* [`feather.toSvg()`](#feathertosvgkey-options)
-	* [`feather.replace()`](#featherreplaceoptions)
+	* [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs)
+	* [`feather.replace()`](#featherreplaceattrs)
+	* [(DEPRECATED) `feather.toSvg()`](#deprecated-feathertosvgname-attrs)
 * [Roadmap](#roadmap)
 * [Contributing](#contributing)
 * [Related Projects](#related-projects)
@ -41,7 +51,7 @@ Or copy and paste the following code snippet into a blank `html` file.
 <!DOCTYPE html>
 <html lang="en">
  <title></title>
-  <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
+  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
@ -68,7 +78,7 @@ The following are additional ways you can use Feather.

 Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).

-```
+```shell
 npm install feather-icons --save
 ```

@ -76,25 +86,27 @@ Or just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or

 #### 2. Include

-Include `feather.js` or `feather.min.js` with a `<script>` tag. These files are located in the `dist` directory of the npm package.
+Include `feather.js` or `feather.min.js` with a `<script>` tag:

 ```html
-<script src="path/to/dist/feather.min.js"></script>
+<script src="path/to/dist/feather.js"></script>
 ```

-Or load the script from a CDN provider.
+> **Note:** `feather.js` and `feather.min.js` are located in the `dist` directory of the npm package.
+
+Or load the script from a CDN provider:

 ```html
 <!-- choose one -->
+<script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 ```

 After including the script, `feather` will be available as a global variable.

 #### 3. Use

-To use an icon on your page, add a `data-feather` attribute with the icon name to an element.
+To use an icon on your page, add a `data-feather` attribute with the icon name to an element:

 ```html
 <i data-feather="circle"></i>
@ -104,7 +116,7 @@ See the complete list of icons at [feathericons.com](https://feathericons.com).

 #### 4. Replace

-Call the `feather.replace` method.
+Call the `feather.replace()` method:

 ```html
 <script>
@ -117,53 +129,146 @@ All elements that have a `data-feather` attribute will be replaced with SVG mark
 ### Node
 #### 1. Install

-Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
+Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm):

-```
+```shell
 npm install feather-icons --save
 ```

 #### 2. Require

-```javascript
-var feather = require('feather-icons')
+```js
+const feather = require('feather-icons')
 ```

 #### 3. Use
-```javascript
-feather.icons.circle
-// <circle cx="12" cy="12" r="10"></circle>

-feather.toSvg('circle')
-// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
+```js
+feather.icons.x
+// {
+//    name: 'x',
+//    contents: '<line ... /><line ... />`,
+//    tags: ['cancel', 'close', 'delete', 'remove'],
+//    attrs: {
+//      class: 'feather feather-x',
+//      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',
+//    },
+//    toSvg: [Function],
+// }

-feather.toSvg('circle', { class: 'my-class', 'stroke-width': 1 })
-// '<svg class="feather feather-circle my-class" 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"><circle cx="12" cy="12" r="10"></circle></svg>'
+feather.icons.x.toSvg()
+// <svg class="feather feather-x" ...><line ... /><line ... /></svg>
+
+feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
+// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>
 ```

 See the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object.

-### Sprite
+### SVG Sprite

-*Coming soon*
+#### 1. Install
+
+> **Note:** If you intend to use Feather with a CDN, you can skip this installation step.
+
+Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
+
+```shell
+npm install feather-icons --save
+```
+
+Or just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory.
+
+#### 2. Use
+
+Include an icon on your page with the following markup:
+
+```html
+<svg
+  width="24"
+  height="24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <use xlink:href="path/to/feather-sprite.svg#circle"/>
+</svg>
+```
+
+> **Note:** `circle` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com).
+
+However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
+
+```css
+.feather {
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+```
+
+```html
+<svg class="feather">
+  <use xlink:href="path/to/dist/feather-sprite.svg#circle"/>
+</svg>
+```
+### Figma
+Feather is available as a [Figma component library](https://www.figma.com/file/dyJRSFTIajik4cdkcXN8yA3K/Feather-Component-Library). To use the components, log in to your Figma account and **duplicate** the file to your drafts.

 ## API Reference

 ### `feather.icons`

-An object with SVG path information for every icon.
+An object with data about every icon.

 #### Usage

-```javascript
-feather.icons.circle
-// <circle cx="12" cy="12" r="10"></circle>
+```js
+feather.icons.x
+// {
+//    name: 'x',
+//    contents: '<line ... /><line ... />',
+//    tags: ['cancel', 'close', 'delete', 'remove'],
+//    attrs: {
+//      class: 'feather feather-x',
+//      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',
+//    },
+//    toSvg: [Function],
+// }

-feather.icons.clock
-// '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 15 15"/>'
+feather.icons.x.toString()
+// '<line ... /><line ... />'
 ```

-### `feather.toSvg(key, [options])`
+> **Note:** `x` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com). Icons with multi-word names (e.g. `arrow-right`) **cannot** be accessed using dot notation (e.g. `feather.icons.x`). Instead, use bracket notation (e.g. `feather.icons['arrow-right']`).
+
+[View Source](https://github.com/colebemis/feather/blob/master/src/icons.js)
+
+---
+
+### `feather.icons[name].toSvg([attrs])`

 Returns an SVG string.

@ -171,25 +276,34 @@ Returns an SVG string.

 | Name      | Type   | Description |
 | --------- | ------ | ----------- |
-| `key`     | string | Icon name |
-| `options` (optional) | Object |  Key-value pairs in the `options` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `options` object. |
+| `attrs` (optional) | Object |  Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |
+
+> **Hint:** You might find these SVG attributes helpful for manipulating icons:
+> * [`color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color)
+> * [`width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width)
+> * [`height`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height)
+> * [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)
+> * [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)
+> * [`stroke-linejoin`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin)

 #### Usage

-```javascript
-feather.toSvg('circle')
+```js
+feather.icons.circle.toSvg()
 // '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

-feather.toSvg('circle', { 'stroke-width': 1 })
+feather.icons.circle.toSvg({ 'stroke-width': 1 })
 // '<svg class="feather feather-circle" 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"><circle cx="12" cy="12" r="10"></circle></svg>'

-feather.toSvg('circle', { class: 'foo bar' })
+feather.icons.circle.toSvg({ class: 'foo bar' })
 // '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
 ```

-[View Source](https://github.com/colebemis/feather/blob/master/src/to-svg.js)
+[View Source](https://github.com/colebemis/feather/blob/master/src/icon.js)

-### `feather.replace([options])`
+---
+
+### `feather.replace([attrs])`

 Replaces all elements that have a `data-feather` attribute with SVG markup corresponding to the element's `data-feather` attribute value.

@ -197,7 +311,7 @@ Replaces all elements that have a `data-feather` attribute with SVG markup corre

 | Name       | Type   | Description |
 | ---------- | ------ | ----------- |
-| `options` (optional)  | Object | Key-value pairs in the `options` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `options` object. |
+| `attrs` (optional)  | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |

 #### Usage

@ -216,7 +330,7 @@ Simple usage:
 </script>
 ```

-You can pass `feather.replace()` an `options` object:
+You can pass `feather.replace()` an `attrs` object:
 ```html
 <i data-feather="circle"></i>
 <!--
@ -229,13 +343,13 @@ You can pass `feather.replace()` an `options` object:
 </script>
 ```

-The id and classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
+All attributes on the placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:

 ```html
-<i id="my-circle-icon" class="foo bar" data-feather="circle"></i>
+<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
 <!--
 <i> will be replaced with:
-<svg id="my-circle-icon" class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
+<svg id="my-circle" class="feather feather-circle foo bar" 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"><circle cx="12" cy="12" r="10"></circle></svg>
 -->

 <script>
@ -245,19 +359,43 @@ The id and classes on a placeholder element (i.e. `<i>`) will be copied to the `

 [View Source](https://github.com/colebemis/feather/blob/master/src/replace.js)

+---
+
+### (DEPRECATED) `feather.toSvg(name, [attrs])`
+
+> **Note:** `feather.toSvg()` is deprecated. Please use `feather.icons[name].toSvg()` instead.
+
+Returns an SVG string.
+
+#### Parameters
+
+| Name      | Type   | Description |
+| --------- | ------ | ----------- |
+| `name`    | string | Icon name   |
+| `attrs` (optional) | Object |  Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |
+
+#### Usage
+
+```js
+feather.toSvg('circle')
+// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
+
+feather.toSvg('circle', { 'stroke-width': 1 })
+// '<svg class="feather feather-circle" 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"><circle cx="12" cy="12" r="10"></circle></svg>'
+
+feather.toSvg('circle', { class: 'foo bar' })
+// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
+```
+
+[View Source](https://github.com/colebemis/feather/blob/master/src/to-svg.js)
+
 ## Roadmap

- [x] Write contributing guidelines
 - [ ] Write icon design guidelines
- [ ] Add usage examples
- [ ] Add SVG sprite
- [ ] Add tests
- [ ] Track code coverage
- [ ] Use Prettier to enforce consistent code style
- [ ] Add search/filter functionality to project website
- [ ] Handle icon aliases
- [ ] Handle usage of custom icons
 - [ ] Improve SVG accessibility
+- [ ] Handle usage of custom icons
+- [ ] Add usage examples
+- [ ] Make `<feather-icon>` web component

 ## Contributing

@ -268,11 +406,12 @@ Caught a mistake or want to contribute to the documentation? [Edit this page on
 ## Related Projects

 - [angular-feather](https://github.com/michaelbazos/angular-feather) - Feather icons for Angular applications
+ - [elm-feather](https://github.com/1602/elm-feather) - Feather icons for Elm applications
 - [react-feather](https://github.com/carmelopullara/react-feather) - Feather icons as React components
+ - [sketch-feather](https://github.com/odmln/sketch-feather) - Feather icons as a Sketch library
 - [vue-feather-icon](https://github.com/mage3k/vue-feather-icon) - Feather icons as Vue components
+ - [php-feather](https://github.com/Pixelrobin/php-feather) - Feather icons as a PHP Library

 ## License

 Feather is licensed under the [MIT License](https://github.com/colebemis/feather/blob/master/LICENSE).
-
-[👋](mailto:cole@colebemis.com)
--- a/bin/.eslintrc.json
+++ b/bin/.eslintrc.json
@ -0,0 +1,6 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": "off",
+    "no-console": "off"
+  }
+}
--- a/bin/tests/snapshots/build-icons-object.test.js.snap
+++ b/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>",
+}
+`;
--- a/bin/tests/snapshots/build-sprite-string.test.js.snap
+++ b/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>"`;
--- a/bin/tests/snapshots/process-svg.test.js.snap
+++ b/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: ]
+`;
--- a/bin/tests/build-icons-object.test.js
+++ b/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();
+});
--- a/bin/tests/build-sprite-string.test.js
+++ b/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();
+});
--- a/bin/tests/process-svg.test.js
+++ b/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();
+});
--- a/bin/build-icons-json.js
+++ b/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));
--- a/bin/build-icons-object.js
+++ b/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;
--- a/bin/build-json.js
+++ b/bin/build-json.js
@ -1,71 +0,0 @@
-/**
- * @file Builds `icons.json` from `icons` directory.
- */
-
-/* eslint-disable import/no-extraneous-dependencies */
-import fs from 'fs';
-import path from 'path';
-import RSVP from 'rsvp';
-import Svgo from 'svgo';
-import parse5 from 'parse5';
-
-const svgFiles = fs.readdirSync(path.resolve(__dirname, '../icons'))
-  .filter(file => path.extname(file) === '.svg');
-
-buildIconsObject(svgFiles)
-  .then(icons => {
-    fs.writeFileSync(
-      path.resolve(__dirname, '../dist/icons.json'),
-      JSON.stringify(icons),
-    );
-  });
-
-/**
- * Build an icons object in the format: `{ <icon name>: <svg content> }`.
- * @param {string[]} svgFiles - A list of file names.
- * @returns {RSVP.Promise<Object>}
- */
-function buildIconsObject(svgFiles) {
-  const icons = {};
-
-  svgFiles.forEach(svgFile => {
-    const svg = fs.readFileSync(path.resolve(__dirname, '../icons', svgFile), 'utf8');
-    const key = path.basename(svgFile, '.svg');
-
-    icons[key] = optimizeSvg(svg)
-      .then(optimizedSvg => getSvgContent(optimizedSvg));
-  });
-
-  return RSVP.hash(icons);
-}
-
-/**
- * Optimize SVG with `svgo`.
- * @param {string} svg - An SVG string.
- * @returns {RSVP.Promise<string>}
- */
-function optimizeSvg(svg) {
-  // configure svgo
-  const svgo = new Svgo({
-    plugins: [
-      { convertShapeToPath: false },
-      { mergePaths: false },
-      { removeAttrs: { attrs: '(fill|stroke.*)' } },
-    ],
-  });
-
-  return new RSVP.Promise(resolve => {
-    svgo.optimize(svg, ({ data }) => resolve(data));
-  });
-}
-
-/**
- * Get content between opening and closing `<svg>` tags.
- * @param {string} svg - An SVG string.
- * @returns {string}
- */
-function getSvgContent(svg) {
-  const fragment = parse5.parseFragment(svg);
-  const content = parse5.serialize(fragment.childNodes[0]);
-  return content;
-}
--- a/bin/build-sprite-string.js
+++ b/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;
--- a/bin/build-sprite.js
+++ b/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));
--- a/bin/build-svgs.js
+++ b/bin/build-svgs.js
@ -1,13 +1,13 @@
-/**
- * @file Builds `dist/icons` directory.
- */
-
 import fs from 'fs';
 import path from 'path';
-import { icons, toSvg } from '../src';
+import icons from '../src/icons';

-Object.keys(icons).forEach(icon => {
-  const svg = toSvg(icon);
+const OUT_DIR = path.resolve(__dirname, '../dist/icons');

-  fs.writeFileSync(path.resolve(__dirname, `../dist/icons/${icon}.svg`), svg);
+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);
 });
--- a/bin/build.sh
+++ b/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
--- a/bin/process-svg.js
+++ b/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;
--- a/bin/process-svgs.js
+++ b/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),
+    );
+  });
--- a/bin/sync-algolia.js
+++ b/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);
+    });
+  });
+}
--- a/commitlint.config.js
+++ b/commitlint.config.js
@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'scope-case': [0],
+    'subject-case': [2, 'always', 'sentence-case'],
+    'header-max-length': [0],
+  },
+};
--- a/examples/index.html
+++ b/examples/index.html
@ -3,20 +3,13 @@
 <head>
  <meta charset="UTF-8">
  <title>Feather</title>
-  <!--
-       In order to build the feather minimized js run
-       $ npm run build
-       in the cloned repository, or use the already built package available on unpkg.com.
-  -->
-  <script src="../dist/feather.min.js"></script>
-  <!-- <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> -->
 </head>
 <body>
-
  <i data-feather="eye"></i>
  <i data-feather="heart"></i>
  <i data-feather="feather"></i>

+  <script src="https://unpkg.com/feather-icons"></script>
  <script>
    feather.replace()
  </script>
--- a/icons/activity.svg
+++ b/icons/activity.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+<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="22 12 18 12 15 21 9 3 6 12 2 12" />
 </svg>
--- a/icons/airplay.svg
+++ b/icons/airplay.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"/>
-    <polygon points="12 15 17 21 7 21 12 15"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" />
+  <polygon points="12 15 17 21 7 21 12 15" />
 </svg>
--- a/icons/alert-circle.svg
+++ b/icons/alert-circle.svg
@ -1,5 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="12" r="10"/>
-    <line x1="12" y1="8" x2="12" y2="12"/>
-    <line x1="12" y1="16" x2="12" y2="16"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <line x1="12" y1="8" x2="12" y2="12" />
+  <line x1="12" y1="16" x2="12" y2="16" />
 </svg>
--- a/icons/alert-octagon.svg
+++ b/icons/alert-octagon.svg
@ -1,5 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/>
-    <line x1="12" y1="8" x2="12" y2="12"/>
-    <line x1="12" y1="16" x2="12" y2="16"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" />
+  <line x1="12" y1="8" x2="12" y2="12" />
+  <line x1="12" y1="16" x2="12" y2="16" />
 </svg>
--- a/icons/alert-triangle.svg
+++ b/icons/alert-triangle.svg
@ -1,5 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
-    <line x1="12" y1="9" x2="12" y2="13"/>
-    <line x1="12" y1="17" x2="12" y2="17"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+  <line x1="12" y1="9" x2="12" y2="13" />
+  <line x1="12" y1="17" x2="12" y2="17" />
 </svg>
--- a/icons/align-center.svg
+++ b/icons/align-center.svg
@ -1,6 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="18" y1="10" x2="6" y2="10"/>
-    <line x1="21" y1="6" x2="3" y2="6"/>
-    <line x1="21" y1="14" x2="3" y2="14"/>
-    <line x1="18" y1="18" x2="6" y2="18"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="18" y1="10" x2="6" y2="10" />
+  <line x1="21" y1="6" x2="3" y2="6" />
+  <line x1="21" y1="14" x2="3" y2="14" />
+  <line x1="18" y1="18" x2="6" y2="18" />
 </svg>
--- a/icons/align-justify.svg
+++ b/icons/align-justify.svg
@ -1,6 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="21" y1="10" x2="3" y2="10"/>
-    <line x1="21" y1="6" x2="3" y2="6"/>
-    <line x1="21" y1="14" x2="3" y2="14"/>
-    <line x1="21" y1="18" x2="3" y2="18"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="21" y1="10" x2="3" y2="10" />
+  <line x1="21" y1="6" x2="3" y2="6" />
+  <line x1="21" y1="14" x2="3" y2="14" />
+  <line x1="21" y1="18" x2="3" y2="18" />
 </svg>
--- a/icons/align-left.svg
+++ b/icons/align-left.svg
@ -1,6 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="17" y1="10" x2="3" y2="10"/>
-    <line x1="21" y1="6" x2="3" y2="6"/>
-    <line x1="21" y1="14" x2="3" y2="14"/>
-    <line x1="17" y1="18" x2="3" y2="18"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="17" y1="10" x2="3" y2="10" />
+  <line x1="21" y1="6" x2="3" y2="6" />
+  <line x1="21" y1="14" x2="3" y2="14" />
+  <line x1="17" y1="18" x2="3" y2="18" />
 </svg>
--- a/icons/align-right.svg
+++ b/icons/align-right.svg
@ -1,6 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="21" y1="10" x2="7" y2="10"/>
-    <line x1="21" y1="6" x2="3" y2="6"/>
-    <line x1="21" y1="14" x2="3" y2="14"/>
-    <line x1="21" y1="18" x2="7" y2="18"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="21" y1="10" x2="7" y2="10" />
+  <line x1="21" y1="6" x2="3" y2="6" />
+  <line x1="21" y1="14" x2="3" y2="14" />
+  <line x1="21" y1="18" x2="7" y2="18" />
 </svg>
--- a/icons/anchor.svg
+++ b/icons/anchor.svg
@ -1,5 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="5" r="3"/>
-    <line x1="12" y1="22" x2="12" y2="8"/>
-    <path d="M5 12H2a10 10 0 0 0 20 0h-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"
+>
+  <circle cx="12" cy="5" r="3" />
+  <line x1="12" y1="22" x2="12" y2="8" />
+  <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
 </svg>
--- a/icons/aperture.svg
+++ b/icons/aperture.svg
@ -1,9 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="12" r="10"/>
-    <line x1="14.31" y1="8" x2="20.05" y2="17.94"/>
-    <line x1="9.69" y1="8" x2="21.17" y2="8"/>
-    <line x1="7.38" y1="12" x2="13.12" y2="2.06"/>
-    <line x1="9.69" y1="16" x2="3.95" y2="6.06"/>
-    <line x1="14.31" y1="16" x2="2.83" y2="16"/>
-    <line x1="16.62" y1="12" x2="10.88" y2="21.94"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <line x1="14.31" y1="8" x2="20.05" y2="17.94" />
+  <line x1="9.69" y1="8" x2="21.17" y2="8" />
+  <line x1="7.38" y1="12" x2="13.12" y2="2.06" />
+  <line x1="9.69" y1="16" x2="3.95" y2="6.06" />
+  <line x1="14.31" y1="16" x2="2.83" y2="16" />
+  <line x1="16.62" y1="12" x2="10.88" y2="21.94" />
 </svg>
--- a/icons/archive.svg
+++ b/icons/archive.svg
@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="21 8 21 21 3 21 3 8" />
+  <rect x="1" y="3" width="22" height="5" />
+  <line x1="10" y1="12" x2="14" y2="12" />
+</svg>
--- a/icons/arrow-down-circle.svg
+++ b/icons/arrow-down-circle.svg
@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <polyline points="8 12 12 16 16 12" />
+  <line x1="12" y1="8" x2="12" y2="16" />
+</svg>
--- a/icons/arrow-down-left.svg
+++ b/icons/arrow-down-left.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <line x1="18" y1="6" x2="6" y2="18" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <polyline points="15 18 6 18 6 9" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <line x1="17" y1="7" x2="7" y2="17" />
+  <polyline points="17 17 7 17 7 7" />
 </svg>
--- a/icons/arrow-down-right.svg
+++ b/icons/arrow-down-right.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <line x1="6" y1="6" x2="18" y2="18" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <polyline points="9 18 18 18 18 9" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <line x1="7" y1="7" x2="17" y2="17" />
+  <polyline points="17 7 17 17 7 17" />
 </svg>
--- a/icons/arrow-down.svg
+++ b/icons/arrow-down.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="12" y1="4" x2="12" y2="20"/>
-    <polyline points="18 14 12 20 6 14"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="12" y1="5" x2="12" y2="19" />
+  <polyline points="19 12 12 19 5 12" />
 </svg>
--- a/icons/arrow-left-circle.svg
+++ b/icons/arrow-left-circle.svg
@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <polyline points="12 8 8 12 12 16" />
+  <line x1="16" y1="12" x2="8" y2="12" />
+</svg>
--- a/icons/arrow-left.svg
+++ b/icons/arrow-left.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="20" y1="12" x2="4" y2="12"/>
-    <polyline points="10 18 4 12 10 6"/>
+<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="19" y1="12" x2="5" y2="12" />
+  <polyline points="12 19 5 12 12 5" />
 </svg>
--- a/icons/arrow-right-circle.svg
+++ b/icons/arrow-right-circle.svg
@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <polyline points="12 16 16 12 12 8" />
+  <line x1="8" y1="12" x2="16" y2="12" />
+</svg>
--- a/icons/arrow-right.svg
+++ b/icons/arrow-right.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="4" y1="12" x2="20" y2="12"/>
-    <polyline points="14 6 20 12 14 18"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="5" y1="12" x2="19" y2="12" />
+  <polyline points="12 5 19 12 12 19" />
 </svg>
--- a/icons/arrow-up-circle.svg
+++ b/icons/arrow-up-circle.svg
@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <polyline points="16 12 12 8 8 12" />
+  <line x1="12" y1="16" x2="12" y2="8" />
+</svg>
--- a/icons/arrow-up-left.svg
+++ b/icons/arrow-up-left.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <line x1="18" y1="18" x2="6" y2="6" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <polyline points="15 6 6 6 6 15" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <line x1="17" y1="17" x2="7" y2="7" />
+  <polyline points="7 17 7 7 17 7" />
 </svg>
--- a/icons/arrow-up-right.svg
+++ b/icons/arrow-up-right.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <line x1="6" y1="18" x2="18" y2="6" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <polyline points="9 6 18 6 18 15" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <line x1="7" y1="17" x2="17" y2="7" />
+  <polyline points="7 7 17 7 17 17" />
 </svg>
--- a/icons/arrow-up.svg
+++ b/icons/arrow-up.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="12" y1="20" x2="12" y2="4"/>
-    <polyline points="6 10 12 4 18 10"/>
+<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="19" x2="12" y2="5" />
+  <polyline points="5 12 12 5 19 12" />
 </svg>
--- a/icons/at-sign.svg
+++ b/icons/at-sign.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="12" r="4"/>
-    <path d="M16 12v1a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="4" />
+  <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" />
 </svg>
--- a/icons/award.svg
+++ b/icons/award.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="8" r="7"/>
-    <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="8" r="7" />
+  <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
 </svg>
--- a/icons/bar-chart-2.svg
+++ b/icons/bar-chart-2.svg
@ -1,5 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <rect x="10" y="3" width="4" height="18" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <rect x="18" y="8" width="4" height="13" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <rect x="2" y="13" width="4" height="8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <line x1="18" y1="20" x2="18" y2="10" />
+  <line x1="12" y1="20" x2="12" y2="4" />
+  <line x1="6" y1="20" x2="6" y2="14" />
 </svg>
--- a/icons/bar-chart.svg
+++ b/icons/bar-chart.svg
@ -1,5 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <rect x="18" y="3" width="4" height="18" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <rect x="10" y="8" width="4" height="13" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <rect x="2" y="13" width="4" height="8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <line x1="12" y1="20" x2="12" y2="10" />
+  <line x1="18" y1="20" x2="18" y2="4" />
+  <line x1="6" y1="20" x2="6" y2="16" />
 </svg>
--- a/icons/battery-charging.svg
+++ b/icons/battery-charging.svg
@ -1,5 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="23" y1="13" x2="23" y2="11" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="11 6 7 12 13 12 9 18" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <path d="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19" />
+  <line x1="23" y1="13" x2="23" y2="11" />
+  <polyline points="11 6 7 12 13 12 9 18" />
 </svg>
--- a/icons/battery.svg
+++ b/icons/battery.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <rect x="1" y="6" width="18" height="12" rx="2" ry="2"/>
-    <line x1="23" y1="13" x2="23" y2="11"/>
+<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="1" y="6" width="18" height="12" rx="2" ry="2" />
+  <line x1="23" y1="13" x2="23" y2="11" />
 </svg>
--- a/icons/bell-off.svg
+++ b/icons/bell-off.svg
@ -1,4 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M8.56 2.9A7 7 0 0 1 19 9v4m-2 4H2a3 3 0 0 0 3-3V9a7 7 0 0 1 .78-3.22M13.73 21a2 2 0 0 1-3.46 0"/>
-    <line x1="1" y1="1" x2="23" y2="23"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+  <path d="M18.63 13A17.89 17.89 0 0 1 18 8" />
+  <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" />
+  <path d="M18 8a6 6 0 0 0-9.33-5" />
+  <line x1="1" y1="1" x2="23" y2="23" />
 </svg>
--- a/icons/bell.svg
+++ b/icons/bell.svg
@ -1,3 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+  <path d="M13.73 21a2 2 0 0 1-3.46 0" />
 </svg>
--- a/icons/bluetooth.svg
+++ b/icons/bluetooth.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5"/>
+<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="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5" />
 </svg>
--- a/icons/bold.svg
+++ b/icons/bold.svg
@ -1 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6,4h8a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H6Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M6,12h9a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H6Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></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"
+>
+  <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+  <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+</svg>
--- a/icons/book-open.svg
+++ b/icons/book-open.svg
@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+</svg>
--- a/icons/book.svg
+++ b/icons/book.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
-    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+<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.5A2.5 2.5 0 0 1 6.5 17H20" />
+  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
 </svg>
--- a/icons/bookmark.svg
+++ b/icons/bookmark.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
 </svg>
--- a/icons/box.svg
+++ b/icons/box.svg
@ -1,5 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12.89 1.45l8 4A2 2 0 0 1 22 7.24v9.53a2 2 0 0 1-1.11 1.79l-8 4a2 2 0 0 1-1.79 0l-8-4a2 2 0 0 1-1.1-1.8V7.24a2 2 0 0 1 1.11-1.79l8-4a2 2 0 0 1 1.78 0z" fill="none" stroke="#0f0f0f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="2.32 6.16 12 11 21.68 6.16" fill="none" stroke="#0f0f0f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="12" y1="22.76" x2="12" y2="11" fill="none" stroke="#0f0f0f" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+  <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+  <line x1="12" y1="22.08" x2="12" y2="12" />
 </svg>
--- a/icons/briefcase.svg
+++ b/icons/briefcase.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
-    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
+  <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
 </svg>
--- a/icons/calendar.svg
+++ b/icons/calendar.svg
@ -1,6 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
-    <line x1="16" y1="2" x2="16" y2="6"/>
-    <line x1="8" y1="2" x2="8" y2="6"/>
-    <line x1="3" y1="10" x2="21" y2="10"/>
+<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="4" width="18" height="18" rx="2" ry="2" />
+  <line x1="16" y1="2" x2="16" y2="6" />
+  <line x1="8" y1="2" x2="8" y2="6" />
+  <line x1="3" y1="10" x2="21" y2="10" />
 </svg>
--- a/icons/camera-off.svg
+++ b/icons/camera-off.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <line x1="1" y1="1" x2="23" y2="23"/>
-    <path d="M21 21H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m3-3h6l2 3h4a2 2 0 0 1 2 2v9.34m-7.72-2.06a4 4 0 1 1-5.56-5.56"/>
+<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="1" y1="1" x2="23" y2="23" />
+  <path d="M21 21H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m3-3h6l2 3h4a2 2 0 0 1 2 2v9.34m-7.72-2.06a4 4 0 1 1-5.56-5.56" />
 </svg>
--- a/icons/camera.svg
+++ b/icons/camera.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
-    <circle cx="12" cy="13" r="4"/>
+<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="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+  <circle cx="12" cy="13" r="4" />
 </svg>
--- a/icons/cast.svg
+++ b/icons/cast.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="2" y1="20" x2="2" y2="20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" />
+  <line x1="2" y1="20" x2="2" y2="20" />
 </svg>
--- a/icons/check-circle.svg
+++ b/icons/check-circle.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
-    <polyline points="23 3 12 14 9 11"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+  <polyline points="22 4 12 14.01 9 11.01" />
 </svg>
--- a/icons/check-square.svg
+++ b/icons/check-square.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="9 11 12 14 23 3"/>
-    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+<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="9 11 12 14 22 4" />
+  <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
 </svg>
--- a/icons/check.svg
+++ b/icons/check.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="20 6 9 17 4 12"/>
+<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="20 6 9 17 4 12" />
 </svg>
--- a/icons/chevron-down.svg
+++ b/icons/chevron-down.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="6 9 12 15 18 9"/>
+<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="6 9 12 15 18 9" />
 </svg>
--- a/icons/chevron-left.svg
+++ b/icons/chevron-left.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="15 18 9 12 15 6"/>
+<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="15 18 9 12 15 6" />
 </svg>
--- a/icons/chevron-right.svg
+++ b/icons/chevron-right.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="9 18 15 12 9 6"/>
+<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="9 18 15 12 9 6" />
 </svg>
--- a/icons/chevron-up.svg
+++ b/icons/chevron-up.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="18 15 12 9 6 15"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="18 15 12 9 6 15" />
 </svg>
--- a/icons/chevrons-down.svg
+++ b/icons/chevrons-down.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <polyline points="7 13 12 18 17 13" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="7 6 12 11 17 6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <polyline points="7 13 12 18 17 13" />
+  <polyline points="7 6 12 11 17 6" />
 </svg>
--- a/icons/chevrons-left.svg
+++ b/icons/chevrons-left.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <polyline points="11 17 6 12 11 7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="18 17 13 12 18 7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <polyline points="11 17 6 12 11 7" />
+  <polyline points="18 17 13 12 18 7" />
 </svg>
--- a/icons/chevrons-right.svg
+++ b/icons/chevrons-right.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <polyline points="13 17 18 12 13 7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="6 17 11 12 6 7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <polyline points="13 17 18 12 13 7" />
+  <polyline points="6 17 11 12 6 7" />
 </svg>
--- a/icons/chevrons-up.svg
+++ b/icons/chevrons-up.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <polyline points="17 11 12 6 7 11" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="17 18 12 13 7 18" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <polyline points="17 11 12 6 7 11" />
+  <polyline points="17 18 12 13 7 18" />
 </svg>
--- a/icons/chrome.svg
+++ b/icons/chrome.svg
@ -1,7 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="12" r="10"/>
-    <circle cx="12" cy="12" r="4"/>
-    <line x1="21.17" y1="8" x2="12" y2="8"/>
-    <line x1="3.95" y1="6.06" x2="8.54" y2="14"/>
-    <line x1="10.88" y1="21.94" x2="15.46" y2="14"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <circle cx="12" cy="12" r="4" />
+  <line x1="21.17" y1="8" x2="12" y2="8" />
+  <line x1="3.95" y1="6.06" x2="8.54" y2="14" />
+  <line x1="10.88" y1="21.94" x2="15.46" y2="14" />
 </svg>
--- a/icons/circle.svg
+++ b/icons/circle.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="12" r="10"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
 </svg>
--- a/icons/clipboard.svg
+++ b/icons/clipboard.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
-    <rect x="8" y="2" width="8" height="4" rx="1" ry="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"
+>
+  <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+  <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
 </svg>
--- a/icons/clock.svg
+++ b/icons/clock.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="12" r="10"/>
-    <polyline points="12 6 12 12 15 15"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <polyline points="12 6 12 12 16 14" />
 </svg>
--- a/icons/cloud-drizzle.svg
+++ b/icons/cloud-drizzle.svg
@ -1,9 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <line x1="8" y1="19" x2="8" y2="21" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="8" y1="13" x2="8" y2="15" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="16" y1="19" x2="16" y2="21" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="16" y1="13" x2="16" y2="15" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="12" y1="21" x2="12" y2="23" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="12" y1="15" x2="12" y2="17" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <line x1="8" y1="19" x2="8" y2="21" />
+  <line x1="8" y1="13" x2="8" y2="15" />
+  <line x1="16" y1="19" x2="16" y2="21" />
+  <line x1="16" y1="13" x2="16" y2="15" />
+  <line x1="12" y1="21" x2="12" y2="23" />
+  <line x1="12" y1="15" x2="12" y2="17" />
+  <path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25" />
 </svg>
--- a/icons/cloud-lightning.svg
+++ b/icons/cloud-lightning.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="13 11 9 17 15 17 11 23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9" />
+  <polyline points="13 11 9 17 15 17 11 23" />
 </svg>
--- a/icons/cloud-off.svg
+++ b/icons/cloud-off.svg
@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"/>
-    <line x1="1" y1="1" x2="23" y2="23"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3" />
+  <line x1="1" y1="1" x2="23" y2="23" />
 </svg>
--- a/icons/cloud-rain.svg
+++ b/icons/cloud-rain.svg
@ -1,6 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <line x1="16" y1="13" x2="16" y2="21" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="8" y1="13" x2="8" y2="21" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <line x1="12" y1="15" x2="12" y2="23" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
-    <path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <line x1="16" y1="13" x2="16" y2="21" />
+  <line x1="8" y1="13" x2="8" y2="21" />
+  <line x1="12" y1="15" x2="12" y2="23" />
+  <path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25" />
 </svg>
--- a/icons/cloud-snow.svg
+++ b/icons/cloud-snow.svg
@ -1,9 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="8" y1="16" x2="8" y2="16" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="8" y1="20" x2="8" y2="20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="12" y1="18" x2="12" y2="18" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="12" y1="22" x2="12" y2="22" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="16" y1="16" x2="16" y2="16" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="16" y1="20" x2="16" y2="20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25" />
+  <line x1="8" y1="16" x2="8" y2="16" />
+  <line x1="8" y1="20" x2="8" y2="20" />
+  <line x1="12" y1="18" x2="12" y2="18" />
+  <line x1="12" y1="22" x2="12" y2="22" />
+  <line x1="16" y1="16" x2="16" y2="16" />
+  <line x1="16" y1="20" x2="16" y2="20" />
 </svg>
--- a/icons/cloud.svg
+++ b/icons/cloud.svg
@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
+<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="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" />
 </svg>
--- a/icons/code.svg
+++ b/icons/code.svg
@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="16 18 22 12 16 6" />
+  <polyline points="8 6 2 12 8 18" />
+</svg>
--- a/icons/codepen.svg
+++ b/icons/codepen.svg
@ -1,7 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="12" y1="22" x2="12" y2="15.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="22 8.5 12 15.5 2 8.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <polyline points="2 15.5 12 8.5 22 15.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line x1="12" y1="2" x2="12" y2="8.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="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"
+>
+  <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" />
+  <line x1="12" y1="22" x2="12" y2="15.5" />
+  <polyline points="22 8.5 12 15.5 2 8.5" />
+  <polyline points="2 15.5 12 8.5 22 15.5" />
+  <line x1="12" y1="2" x2="12" y2="8.5" />
 </svg>
--- a/icons/codesandbox.svg
+++ b/icons/codesandbox.svg
@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+  <polyline points="7.5 4.21 12 6.81 16.5 4.21" />
+  <polyline points="7.5 19.79 7.5 14.6 3 12" />
+  <polyline points="21 12 16.5 14.6 16.5 19.79" />
+  <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+  <line x1="12" y1="22.08" x2="12" y2="12" />
+</svg>
--- a/icons/coffee.svg
+++ b/icons/coffee.svg
@ -0,0 +1,17 @@
+<svg
+  viewBox="0 0 24 24"
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 8h1a4 4 0 0 1 0 8h-1" />
+  <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" />
+  <line x1="6" y1="1" x2="6" y2="4" />
+  <line x1="10" y1="1" x2="10" y2="4" />
+  <line x1="14" y1="1" x2="14" y2="4" />
+</svg>
--- a/icons/columns.svg
+++ b/icons/columns.svg
@ -0,0 +1,13 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18" />
+</svg>
--- a/Show More
+++ b/Show More