update workflow and bin

bb35bbd0 · Jun · 9d3d0625 · bb35bbd0 · bb35bbd0 · bb35bbd0
Commit bb35bbd0 authored Nov 04, 2019 by Jun
30 changed files
--- a/.github/workflows/push.yml
+++ b/.github/workflows/push.yml
@@ -14,9 +14,6 @@ jobs:
    steps:
    - uses: actions/checkout@v1
-    - name: "install"
-      run: yarn install
    - name: Figma Action
      uses: primer/[email protected]
      with:
@@ -25,15 +22,12 @@ jobs:
        FIGMA_FILE_URL: ${{ secrets.FIGMA_FILE_URL }}
        FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
-    - name: "generate"
+    - uses: actions/setup-node@v1
-      run: yarn generate
-    - name: "build"
-      run: yarn build
-    - name: "publish"
-      uses: actions/npm@master
-      env:
-        NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
      with:
-        args: publish
+        node-version: '10.x'
+    - run: yarn install
+    - run: yarn generate
+    - run: yarn build
+    - run: yarn publish
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
--- a/bin/build.js
+++ b/bin/build.js
@@ -5,8 +5,9 @@ const fs = require('fs')
 const format = require('prettier-eslint')
 const upperCamelCase = require('uppercamelcase')
 const processSvg = require('./processSvg')
-const { defaultAttrs, getElementCode } = require('./template')
+const style = process.env.npm_package_config_style || 'stroke'
-const icons = require('../icons.json')
+const { defaultAttrs, getElementCode } = require(`./template-${style}`)
+const icons = require('../src/data.json.js')
 const rootDir = path.join(__dirname, '..')
@@ -45,7 +46,8 @@ const generateIndex = () => {
 // generate attributes code
 const attrsToString = (attrs) => {
  return Object.keys(attrs).map((key) => {
-    if (key === 'width' || key === 'height' || key === 'stroke') {
+    // should distinguish fill or stroke
+    if (key === 'width' || key === 'height' || key === style) {
      return key + '={' + attrs[key] + '}';
    }
    if (key === 'otherProps') {
@@ -56,9 +58,11 @@ const attrsToString = (attrs) => {
 };
 // generate icon code separately
-const generateIconCode = async ({name, code}) => {
+const generateIconCode = async ({name}) => {
-  const location = path.join(rootDir, 'src/icons', `${name}.js`)
+  const location = path.join(rootDir, 'src/svg', `${name}.svg`)
+  const destination = path.join(rootDir, 'src/icons', `${name}.js`)
  const ComponentName = (name === 'github') ? 'GitHub' : upperCamelCase(name)
+  const code = fs.readFileSync(location)
  const svgCode = await processSvg(code)
  const element = getElementCode(ComponentName, attrsToString(defaultAttrs), svgCode)
  const component = format({
@@ -73,7 +77,7 @@ const generateIconCode = async ({name, code}) => {
    },
  });
-  fs.writeFileSync(location, component, 'utf-8');
+  fs.writeFileSync(destination, component, 'utf-8');
  console.log('Successfully built', ComponentName);
  return {ComponentName, name}
@@ -98,9 +102,12 @@ const appendToIndex = ({ComponentName, name}) => {
 generateIndex()
-icons.forEach(({name, code}) => {
+Object
-  generateIconCode({name, code})
+  .keys(icons)
-    .then(({ComponentName, name}) => {
+  .map(key => icons[key])
-      appendToIndex({ComponentName, name})
+  .forEach(({name}) => {
-    })
+    generateIconCode({name})
-})
+      .then(({ComponentName, name}) => {
+        appendToIndex({ComponentName, name})
+      })
+  })
--- a/bin/template-fill.js
+++ b/bin/template-fill.js
+const defaultAttrs = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 'size',
+  height: 'size',
+  viewBox: '0 0 24 24',
+  fill: 'color',
+  otherProps: '...otherProps',
+}
+const getElementCode = (ComponentName, attrs, svgCode) => `
+  import React from 'react';
+  import PropTypes from 'prop-types';
+  const ${ComponentName} = (props) => {
+    const { color, size, ...otherProps } = props;
+    return (
+      <svg ${attrs}>
+        ${svgCode}
+      </svg>
+    )
+  };
+  ${ComponentName}.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+  }
+  ${ComponentName}.defaultProps = {
+    color: 'currentColor',
+    size: '24',
+  }
+  export default ${ComponentName}
+`
+module.exports = { defaultAttrs, getElementCode }
--- a/bin/template.js
+++ b/bin/template.js
--- a/icons.json
+++ b/icons.json
-[
-  {
-    "id": "3:167",
-    "name": "anchor",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22V8\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M5 12H2C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12H19\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:168",
-    "name": "align-right",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21 10H7\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 6H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 14H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 18H7\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:169",
-    "name": "align-left",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M17 10H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 6H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 14H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M17 18H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:170",
-    "name": "align-justify",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21 10H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 6H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 14H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 18H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:171",
-    "name": "align-center",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 10H6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 6H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 14H3\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M18 18H6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:172",
-    "name": "alert-triangle",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<path d=\"M10.29 3.85996L1.82001 18C1.64537 18.3024 1.55297 18.6453 1.55199 18.9945C1.55102 19.3437 1.6415 19.6871 1.81443 19.9905C1.98737 20.2939 2.23673 20.5467 2.53771 20.7238C2.8387 20.9009 3.1808 20.9961 3.53001 21H20.47C20.8192 20.9961 21.1613 20.9009 21.4623 20.7238C21.7633 20.5467 22.0126 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.447 18.6453 22.3546 18.3024 22.18 18L13.71 3.85996C13.5317 3.56607 13.2807 3.32308 12.9812 3.15444C12.6817 2.98581 12.3437 2.89722 12 2.89722C11.6563 2.89722 11.3183 2.98581 11.0188 3.15444C10.7193 3.32308 10.4683 3.56607 10.29 3.85996V3.85996Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17H12.01\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 9V13\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
-  },
-  {
-    "id": "3:173",
-    "name": "alert-octagon",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<path d=\"M7.86 2H16.14L22 7.86V16.14L16.14 22H7.86L2 16.14V7.86L7.86 2Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 16H12.01\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 8V12\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
-  },
-  {
-    "id": "3:174",
-    "name": "alert-circle",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 8V12\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 16H12.01\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
-  },
-  {
-    "id": "3:175",
-    "name": "airplay",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 17H4C3.46957 17 2.96086 16.7893 2.58579 16.4142C2.21071 16.0391 2 15.5304 2 15V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H20C20.5304 3 21.0391 3.21071 21.4142 3.58579C21.7893 3.96086 22 4.46957 22 5V15C22 15.5304 21.7893 16.0391 21.4142 16.4142C21.0391 16.7893 20.5304 17 20 17H19\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 15L17 21H7L12 15Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:176",
-    "name": "activity",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M22 12H18L15 21L9 3L6 12H2\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:48",
-    "name": "image",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8.5 10C9.32843 10 10 9.32843 10 8.5C10 7.67157 9.32843 7 8.5 7C7.67157 7 7 7.67157 7 8.5C7 9.32843 7.67157 10 8.5 10Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 15L16 10L5 21\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:66",
-    "name": "folder",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M22 19C22 19.5304 21.7893 20.0391 21.4142 20.4142C21.0391 20.7893 20.5304 21 20 21H4C3.46957 21 2.96086 20.7893 2.58579 20.4142C2.21071 20.0391 2 19.5304 2 19V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H9L11 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V19Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:117",
-    "name": "cloud-lightning",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<path d=\"M19 16.9C20.2152 16.6532 21.2953 15.9638 22.0307 14.9655C22.7661 13.9671 23.1043 12.7312 22.9797 11.4975C22.8551 10.2638 22.2765 9.12046 21.3563 8.28937C20.4361 7.45828 19.24 6.99875 18 6.99999H16.74C16.4087 5.71731 15.764 4.53698 14.8639 3.56498C13.9638 2.59298 12.8363 1.85972 11.5828 1.43106C10.3293 1.00239 8.98898 0.891726 7.68214 1.109C6.3753 1.32628 5.14287 1.86469 4.09551 2.6759C3.04814 3.48711 2.21863 4.54573 1.68144 5.75671C1.14424 6.96768 0.916192 8.29311 1.01776 9.61399C1.11932 10.9349 1.54732 12.2098 2.26332 13.3245C2.97933 14.4391 3.96093 15.3584 5.12 16\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M13 11L9 17H15L11 23\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
-  },
-  {
-    "id": "3:91",
-    "name": "database",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 8C16.9706 8 21 6.65685 21 5C21 3.34315 16.9706 2 12 2C7.02944 2 3 3.34315 3 5C3 6.65685 7.02944 8 12 8Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 12C21 13.66 17 15 12 15C7 15 3 13.66 3 12\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 5V19C3 20.66 7 22 12 22C17 22 21 20.66 21 19V5\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:92",
-    "name": "crosshair",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M22 12H18\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 12H2\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6V2\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22V18\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:93",
-    "name": "crop",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.13 1L6 16C6 16.5304 6.21071 17.0391 6.58579 17.4142C6.96086 17.7893 7.46957 18 8 18H23\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M1 6.13L16 6C16.5304 6 17.0391 6.21071 17.4142 6.58579C17.7893 6.96086 18 7.46957 18 8V23\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:118",
-    "name": "cloud-drizzle",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<path d=\"M8 19V21\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8 13V15\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M16 19V21\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M16 13V15\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 21V23\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 15V17\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20 16.58C21.0512 16.1196 21.9121 15.3116 22.4381 14.2916C22.9641 13.2715 23.1231 12.1016 22.8886 10.9782C22.6541 9.85478 22.0402 8.84623 21.15 8.12185C20.2599 7.39748 19.1476 7.00137 18 7.00002H16.74C16.423 5.77254 15.8189 4.63797 14.9773 3.68982C14.1358 2.74167 13.0809 2.00709 11.8998 1.54664C10.7186 1.08619 9.44491 0.913035 8.18368 1.04146C6.92246 1.16989 5.70981 1.59622 4.6457 2.2853C3.58158 2.97439 2.69647 3.9065 2.06331 5.00482C1.43015 6.10313 1.06708 7.33619 1.00401 8.60237C0.940954 9.86855 1.17971 11.1316 1.70061 12.2874C2.2215 13.4432 3.00962 14.4586 4 15.25\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
-  },
-  {
-    "id": "2:6",
-    "name": "zoom-out",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 21L16.65 16.65\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8 11H14\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "31:2",
-    "name": "key",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21 2L19 4M11.3891 11.6109C12.3844 12.6062 13 13.9812 13 15.5C13 18.5376 10.5376 21 7.5 21C4.46244 21 2 18.5376 2 15.5C2 12.4624 4.46244 10 7.5 10C9.01878 10 10.3938 10.6156 11.3891 11.6109ZM11.3891 11.6109L15.5 7.5M15.5 7.5L18.5 10.5L22 6.99999L19 4M15.5 7.5L19 4\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:50",
-    "name": "help-circle",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M9.09 8.99999C9.3251 8.33166 9.78915 7.7681 10.4 7.40912C11.0108 7.05015 11.7289 6.91893 12.4272 7.0387C13.1255 7.15848 13.7588 7.52151 14.2151 8.06352C14.6713 8.60552 14.9211 9.29151 14.92 9.99999C14.92 12 11.92 13 11.92 13\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17H12.01\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
-  },
-  {
-    "id": "3:51",
-    "name": "heart",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M20.84 4.60999C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.60999L12 5.66999L10.94 4.60999C9.9083 3.5783 8.50903 2.9987 7.05 2.9987C5.59096 2.9987 4.19169 3.5783 3.16 4.60999C2.1283 5.64169 1.54871 7.04096 1.54871 8.49999C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3095 9.93789 22.4518 9.22248 22.4518 8.49999C22.4518 7.77751 22.3095 7.0621 22.0329 6.39464C21.7563 5.72718 21.351 5.12075 20.84 4.60999V4.60999Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:52",
-    "name": "headphones",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 18V12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12V18\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H18C17.4696 21 16.9609 20.7893 16.5858 20.4142C16.2107 20.0391 16 19.5304 16 19V16C16 15.4696 16.2107 14.9609 16.5858 14.5858C16.9609 14.2107 17.4696 14 18 14H21V19ZM3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H6C6.53043 21 7.03914 20.7893 7.41421 20.4142C7.78929 20.0391 8 19.5304 8 19V16C8 15.4696 7.78929 14.9609 7.41421 14.5858C7.03914 14.2107 6.53043 14 6 14H3V19Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:137",
-    "name": "calendar",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M16 2V6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8 2V6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 10H21\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:88",
-    "name": "dollar-sign",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 1V23\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:21",
-    "name": "mic",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 1C11.2044 1 10.4413 1.31607 9.87868 1.87868C9.31607 2.44129 9 3.20435 9 4V12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12V4C15 3.20435 14.6839 2.44129 14.1213 1.87868C13.5587 1.31607 12.7956 1 12 1V1Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M19 10V12C19 13.8565 18.2625 15.637 16.9497 16.9497C15.637 18.2625 13.8565 19 12 19C10.1435 19 8.36301 18.2625 7.05025 16.9497C5.7375 15.637 5 13.8565 5 12V10\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 19V23\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8 23H16\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "3:58",
-    "name": "gitlab",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<path d=\"M22.65 14.39L12 22.13L1.35 14.39C1.20722 14.285 1.10132 14.1375 1.04743 13.9687C0.993549 13.7998 0.994447 13.6183 1.05 13.45L2.27 9.66999L4.71 2.15999C4.73367 2.0988 4.77134 2.044 4.82 1.99999C4.89924 1.92761 5.00268 1.88748 5.11 1.88748C5.21732 1.88748 5.32076 1.92761 5.4 1.99999C5.45138 2.04966 5.48924 2.11161 5.51 2.17999L7.95 9.66999H16.05L18.49 2.15999C18.5137 2.0988 18.5513 2.044 18.6 1.99999C18.6792 1.92761 18.7827 1.88748 18.89 1.88748C18.9973 1.88748 19.1008 1.92761 19.18 1.99999C19.2314 2.04966 19.2692 2.11161 19.29 2.17999L21.73 9.68999L23 13.45C23.0505 13.6235 23.0438 13.8086 22.9807 13.978C22.9177 14.1473 22.8017 14.2918 22.65 14.39Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
-  },
-  {
-    "id": "3921:12",
-    "name": "cafe",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 8H19C20.0609 8 21.0783 8.42143 21.8284 9.17157C22.5786 9.92172 23 10.9391 23 12C23 13.0609 22.5786 14.0783 21.8284 14.8284C21.0783 15.5786 20.0609 16 19 16H18\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M2 8H18V17C18 18.0609 17.5786 19.0783 16.8284 19.8284C16.0783 20.5786 15.0609 21 14 21H6C4.93913 21 3.92172 20.5786 3.17157 19.8284C2.42143 19.0783 2 18.0609 2 17V8Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 3V4\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M10 3V4\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M14 3V4\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "4030:9",
-    "name": "sketch",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 21L22.5 11.5C22.6517 11.4018 22.7677 11.2573 22.8307 11.088C22.8938 10.9186 22.9005 10.7335 22.85 10.56L18 4H12H6L1.2 10.56C1.14445 10.7283 1.14355 10.9099 1.19744 11.0787C1.25132 11.2475 1.35723 11.395 1.5 11.5L12 21Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
-  },
-  {
-    "id": "4032:18",
-    "name": "news",
-    "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 8H8H6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M10 12H8H6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M18 16H12H6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M18 8H14V12H18V8Z\" stroke=\"black\" stroke-width=\"2\"/>\n<path d=\"M22 4H2V20H22V4Z\" stroke=\"black\" stroke-width=\"2\"/>\n</svg>\n"
-  }
-]
\ No newline at end of file
--- a/package.json
+++ b/package.json
@@ -33,6 +33,9 @@
    "build:es": "rm -rf build && babel src --out-dir build --copy-files",
    "build": "concurrently \"yarn:build:*\""
  },
+  "config" : {
+    "style" : "fill"
+  },
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.5.5",

--- a/src/icons/activity.js
+++ b/src/icons/activity.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Activity = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
-    </svg>
-  );
-};
-Activity.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Activity.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Activity;
--- a/src/icons/airplay.js
+++ b/src/icons/airplay.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Airplay = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M5 17H4a2 2 0 01-2-2V5a2 2 0 012-2h16a2 2 0 012 2v10a2 2 0 01-2 2h-1"></path>
-      <path d="M12 15l5 6H7l5-6z"></path>
-    </svg>
-  );
-};
-Airplay.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Airplay.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Airplay;
--- a/src/icons/alert-circle.js
+++ b/src/icons/alert-circle.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const AlertCircle = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <g clip-path="url(#clip0)">
-        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
-        <path d="M12 8v4"></path>
-        <path d="M12 16h.01"></path>
-      </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect width="24" height="24"></rect>
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-AlertCircle.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-AlertCircle.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default AlertCircle;
--- a/src/icons/alert-octagon.js
+++ b/src/icons/alert-octagon.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const AlertOctagon = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <g clip-path="url(#clip0)">
-        <path d="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2z"></path>
-        <path d="M12 16h.01"></path>
-        <path d="M12 8v4"></path>
-      </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect width="24" height="24"></rect>
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-AlertOctagon.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-AlertOctagon.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default AlertOctagon;
--- a/src/icons/alert-triangle.js
+++ b/src/icons/alert-triangle.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const AlertTriangle = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <g clip-path="url(#clip0)">
-        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0v0z"></path>
-        <path d="M12 17h.01"></path>
-        <path d="M12 9v4"></path>
-      </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect width="24" height="24"></rect>
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-AlertTriangle.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-AlertTriangle.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default AlertTriangle;
--- a/src/icons/align-center.js
+++ b/src/icons/align-center.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const AlignCenter = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M18 10H6"></path>
-      <path d="M21 6H3"></path>
-      <path d="M21 14H3"></path>
-      <path d="M18 18H6"></path>
-    </svg>
-  );
-};
-AlignCenter.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-AlignCenter.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default AlignCenter;
--- a/src/icons/align-justify.js
+++ b/src/icons/align-justify.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const AlignJustify = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M21 10H3"></path>
-      <path d="M21 6H3"></path>
-      <path d="M21 14H3"></path>
-      <path d="M21 18H3"></path>
-    </svg>
-  );
-};
-AlignJustify.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-AlignJustify.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default AlignJustify;
--- a/src/icons/align-left.js
+++ b/src/icons/align-left.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const AlignLeft = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M17 10H3"></path>
-      <path d="M21 6H3"></path>
-      <path d="M21 14H3"></path>
-      <path d="M17 18H3"></path>
-    </svg>
-  );
-};
-AlignLeft.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-AlignLeft.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default AlignLeft;
--- a/src/icons/align-right.js
+++ b/src/icons/align-right.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const AlignRight = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M21 10H7"></path>
-      <path d="M21 6H3"></path>
-      <path d="M21 14H3"></path>
-      <path d="M21 18H7"></path>
-    </svg>
-  );
-};
-AlignRight.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-AlignRight.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default AlignRight;
--- a/src/icons/anchor.js
+++ b/src/icons/anchor.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Anchor = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M12 8a3 3 0 100-6 3 3 0 000 6z"></path>
-      <path d="M12 22V8"></path>
-      <path d="M5 12H2a10 10 0 0020 0h-3"></path>
-    </svg>
-  );
-};
-Anchor.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Anchor.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Anchor;
--- a/src/icons/cloud-drizzle.js
+++ b/src/icons/cloud-drizzle.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const CloudDrizzle = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <g clip-path="url(#clip0)">
-        <path d="M8 19v2"></path>
-        <path d="M8 13v2"></path>
-        <path d="M16 19v2"></path>
-        <path d="M16 13v2"></path>
-        <path d="M12 21v2"></path>
-        <path d="M12 15v2"></path>
-        <path d="M20 16.58A5 5 0 0018 7h-1.26A8 8 0 104 15.25"></path>
-      </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect width="24" height="24"></rect>
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-CloudDrizzle.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-CloudDrizzle.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default CloudDrizzle;
--- a/src/icons/cloud-lightning.js
+++ b/src/icons/cloud-lightning.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const CloudLightning = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <g clip-path="url(#clip0)">
-        <path d="M19 16.9A5 5 0 0018 7h-1.26a8 8 0 10-11.62 9"></path>
-        <path d="M13 11l-4 6h6l-4 6"></path>
-      </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect width="24" height="24"></rect>
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-CloudLightning.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-CloudLightning.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default CloudLightning;
--- a/src/icons/crop.js
+++ b/src/icons/crop.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Crop = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M6.13 1L6 16a2 2 0 002 2h15"></path>
-      <path d="M1 6.13L16 6a2 2 0 012 2v15"></path>
-    </svg>
-  );
-};
-Crop.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Crop.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Crop;
--- a/src/icons/crosshair.js
+++ b/src/icons/crosshair.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Crosshair = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
-      <path d="M22 12h-4"></path>
-      <path d="M6 12H2"></path>
-      <path d="M12 6V2"></path>
-      <path d="M12 22v-4"></path>
-    </svg>
-  );
-};
-Crosshair.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Crosshair.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Crosshair;
--- a/src/icons/database.js
+++ b/src/icons/database.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Database = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M12 8c4.97 0 9-1.343 9-3s-4.03-3-9-3-9 1.343-9 3 4.03 3 9 3z"></path>
-      <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
-      <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
-    </svg>
-  );
-};
-Database.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Database.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Database;
--- a/src/icons/folder.js
+++ b/src/icons/folder.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Folder = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"></path>
-    </svg>
-  );
-};
-Folder.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Folder.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Folder;
--- a/src/icons/headphones.js
+++ b/src/icons/headphones.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Headphones = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M3 18v-6a9 9 0 1118 0v6"></path>
-      <path d="M21 19a2 2 0 01-2 2h-1a2 2 0 01-2-2v-3a2 2 0 012-2h3v5zM3 19a2 2 0 002 2h1a2 2 0 002-2v-3a2 2 0 00-2-2H3v5z"></path>
-    </svg>
-  );
-};
-Headphones.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Headphones.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Headphones;
--- a/src/icons/heart.js
+++ b/src/icons/heart.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Heart = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.501 5.501 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78v0z"></path>
-    </svg>
-  );
-};
-Heart.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Heart.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Heart;
--- a/src/icons/help-circle.js
+++ b/src/icons/help-circle.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const HelpCircle = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <g clip-path="url(#clip0)">
-        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
-        <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"></path>
-        <path d="M12 17h.01"></path>
-      </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect width="24" height="24"></rect>
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-HelpCircle.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-HelpCircle.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default HelpCircle;
--- a/src/icons/image.js
+++ b/src/icons/image.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Image = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2z"></path>
-      <path d="M8.5 10a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
-      <path d="M21 15l-5-5L5 21"></path>
-    </svg>
-  );
-};
-Image.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Image.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Image;
--- a/src/icons/key.js
+++ b/src/icons/key.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const Key = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path>
-    </svg>
-  );
-};
-Key.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-Key.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default Key;
--- a/src/icons/zoom-out.js
+++ b/src/icons/zoom-out.js
-import React from 'react';
-import PropTypes from 'prop-types';
-const ZoomOut = props => {
-  const { color, size, ...otherProps } = props;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <path d="M11 19a8 8 0 100-16 8 8 0 000 16z"></path>
-      <path d="M21 21l-4.35-4.35"></path>
-      <path d="M8 11h6"></path>
-    </svg>
-  );
-};
-ZoomOut.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-ZoomOut.defaultProps = {
-  color: 'currentColor',
-  size: '24'
-};
-export default ZoomOut;
--- a/src/index.d.ts
+++ b/src/index.d.ts
-/// <reference types="react" />
-  import { ComponentType, SVGAttributes } from 'react';
-  interface Props extends SVGAttributes<SVGElement> {
-    color?: string;
-    size?: string | number;
-  }
-  type Icon = ComponentType<Props>;
-  export const Anchor: Icon;
-export const AlignRight: Icon;
-export const AlignLeft: Icon;
-export const AlignJustify: Icon;
-export const AlignCenter: Icon;
-export const AlertTriangle: Icon;
-export const AlertOctagon: Icon;
-export const AlertCircle: Icon;
-export const Airplay: Icon;
-export const Activity: Icon;
-export const Image: Icon;
-export const Folder: Icon;
-export const CloudLightning: Icon;
-export const Database: Icon;
-export const Crosshair: Icon;
-export const Crop: Icon;
-export const CloudDrizzle: Icon;
-export const ZoomOut: Icon;
-export const Key: Icon;
-export const HelpCircle: Icon;
-export const Heart: Icon;
-export const Headphones: Icon;
--- a/src/index.js
+++ b/src/index.js
-export { default as Anchor } from './icons/anchor';
-export { default as AlignRight } from './icons/align-right';
-export { default as AlignLeft } from './icons/align-left';
-export { default as AlignJustify } from './icons/align-justify';
-export { default as AlignCenter } from './icons/align-center';
-export { default as AlertTriangle } from './icons/alert-triangle';
-export { default as AlertOctagon } from './icons/alert-octagon';
-export { default as AlertCircle } from './icons/alert-circle';
-export { default as Airplay } from './icons/airplay';
-export { default as Activity } from './icons/activity';
-export { default as Image } from './icons/image';
-export { default as Folder } from './icons/folder';
-export { default as CloudLightning } from './icons/cloud-lightning';
-export { default as Database } from './icons/database';
-export { default as Crosshair } from './icons/crosshair';
-export { default as Crop } from './icons/crop';
-export { default as CloudDrizzle } from './icons/cloud-drizzle';
-export { default as ZoomOut } from './icons/zoom-out';
-export { default as Key } from './icons/key';
-export { default as HelpCircle } from './icons/help-circle';
-export { default as Heart } from './icons/heart';
-export { default as Headphones } from './icons/headphones';