首次提交，多多关照

.babelrc

+{
+  "presets": [
+    ["@babel/env", { "modules": false }],
+    "@babel/react"
+  ],
+  "plugins": [
+    "@babel/proposal-object-rest-spread"
+  ]
+}

.gitignore

+node_modules
+dist
+build
\ No newline at end of file

.npmignore

+bin
+src
+.babelrc

README.md

+# Icon Automation Workflow Using Figma

bin/build.js

+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prefer-template */
+const path = require('path')
+const fs = require('fs')
+const format = require('prettier-eslint')
+const upperCamelCase = require('uppercamelcase')
+const processSvg = require('./processSvg')
+const { defaultAttrs, getElementCode } = require('./template')
+const icons = require('../icons.json')
+
+const rootDir = path.join(__dirname, '..')
+
+// where icons code in
+const srcDir = path.join(rootDir, 'src')
+const iconsDir = path.join(rootDir, 'src/icons')
+
+// generate index and d.ts file
+const generateIndex = () => {
+  if (!fs.existsSync(srcDir)) {
+    fs.mkdirSync(srcDir)
+    if (!fs.existsSync(iconsDir)) {
+      fs.mkdirSync(iconsDir)
+    }
+  }
+
+  const initialTypeDefinitions = `/// <reference types="react" />
+  import { ComponentType, SVGAttributes } from 'react';
+
+  interface Props extends SVGAttributes<SVGElement> {
+    color?: string;
+    size?: string | number;
+  }
+
+  type Icon = ComponentType<Props>;
+  `;
+
+  fs.writeFileSync(path.join(rootDir, 'src', 'index.js'), '', 'utf-8');
+  fs.writeFileSync(
+    path.join(rootDir, 'src', 'index.d.ts'),
+    initialTypeDefinitions,
+    'utf-8',
+  );
+}
+
+// generate attributes code
+const attrsToString = (attrs) => {
+  return Object.keys(attrs).map((key) => {
+    if (key === 'width' || key === 'height' || key === 'stroke') {
+      return key + '={' + attrs[key] + '}';
+    }
+    if (key === 'otherProps') {
+      return '{...otherProps}';
+    }
+    return key + '="' + attrs[key] + '"';
+  }).join(' ');
+};
+
+// generate icon code separately
+const generateIconCode = async ({name, code}) => {
+  const location = path.join(rootDir, 'src/icons', `${name}.js`)
+  const ComponentName = (name === 'github') ? 'GitHub' : upperCamelCase(name)
+  const svgCode = await processSvg(code)
+  const element = getElementCode(ComponentName, attrsToString(defaultAttrs), svgCode)
+  const component = format({
+    text: element,
+    eslintConfig: {
+      extends: 'airbnb',
+    },
+    prettierOptions: {
+      bracketSpacing: true,
+      singleQuote: true,
+      parser: 'flow',
+    },
+  });
+
+  fs.writeFileSync(location, component, 'utf-8');
+
+  console.log('Successfully built', ComponentName);
+  return {ComponentName, name}
+}
+
+// append export code to index.js
+const appendToIndex = ({ComponentName, name}) => {
+  const exportString = `export { default as ${ComponentName} } from './icons/${name}';\r\n`;
+  fs.appendFileSync(
+    path.join(rootDir, 'src', 'index.js'),
+    exportString,
+    'utf-8',
+  );
+
+  const exportTypeString = `export const ${ComponentName}: Icon;\n`;
+  fs.appendFileSync(
+    path.join(rootDir, 'src', 'index.d.ts'),
+    exportTypeString,
+    'utf-8',
+  );
+}
+
+generateIndex()
+
+icons.forEach(({name, code}) => {
+  generateIconCode({name, code})
+    .then(({ComponentName, name}) => {
+      appendToIndex({ComponentName, name})
+    })
+})

bin/export.js

+const fs = require('fs')
+const path = require('path')
+const rp = require('request-promise')
+const processSvg = require('./processSvg')
+require('dotenv').config()
+
+const figmaToken = process.env.FIGMA_TOKEN
+const fileKey = process.env.FILE_KEY
+
+// 获取元素节点
+const getNodes = async function () {
+  const nodes = await rp({
+    url: `https://api.figma.com/v1/files/${fileKey}`,
+    headers: {
+      'X-FIGMA-TOKEN': figmaToken
+    }
+  })
+  console.log('get Nodes successfully!')
+  return nodes
+}
+
+// 获取 SVG
+const getSvgs = async function (ids) {
+  const svgs = await rp({
+    url: `https://api.figma.com/v1/images/${fileKey}`,
+    headers: {
+      'X-FIGMA-TOKEN': figmaToken
+    },
+    qs: { ids, format: 'svg' }
+  })
+  console.log('get SVG url successfully!')
+  return svgs
+}
+
+// 获取 SVG 代码
+// 输出 { name: 'share', code: '<svg>...</svg>' }
+const getSvgCode = async function (icons, url, key) {
+  const svgCode = await rp(url)
+  const code = await processSvg(svgCode)
+  const current = icons.find(icon => {
+    return icon.id===key
+  })
+  console.log(`get ${current.name} code successfully!`)
+  return { name: current.name, code }
+}
+
+// 导出 SVG 文件
+const exportSvgs = async function (iconsArg) {
+  let icons
+  if (iconsArg) {
+    icons = iconsArg
+  } else {
+    // 输出 [{id: '1', name: 'activity'}]
+    icons = await getNodes()
+      .then(res => {
+        const { components } = JSON.parse(res)
+        return Object
+          .keys(components)
+          .map(key => ({id: key, name: components[key].name}))
+      })
+  }
+  // 输出 '1,2,3,6'
+  const ids = icons.map(icon => icon.id).join()
+
+  // 输出 {'1': 'https://path/to/svg'}
+  const svgUrls = await getSvgs(ids)
+    .then(res => {
+      const svgs = JSON.parse(res).images
+      return svgs
+    })
+
+  // 添加 code，生成 json 文件
+  const iconsPromises = Object.keys(svgUrls)
+    .map(async key => await getSvgCode(icons, svgUrls[key], key))
+  const finalIcons = await Promise.all(iconsPromises)
+  const iconsObj = {}
+  finalIcons
+    .map(icon => {
+      iconsObj[icon.name] = icon.code
+    })
+  console.log('export JSON successfully!')
+  fs.writeFileSync(path.join(__dirname, 'icons.json'), JSON.stringify(iconsObj, null, 2))
+}
+
+module.exports = exportSvgs

bin/processSvg.js

+const Svgo = require('svgo');
+const cheerio = require('cheerio')
+
+/**
+ * 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).then(({ data }) => resolve(data));
+  });
+}
+
+/**
+ * remove SVG element.
+ * @param {string} svg - An SVG string.
+ * @returns {string}
+ */
+function removeSVGElement(svg) {
+  const $ = cheerio.load(svg);
+  return $('body').children().html();
+}
+
+/**
+ * Process SVG string.
+ * @param {string} svg - An SVG string.
+ * @param {Promise<string>}
+ */
+async function processSvg(svg) {
+  const optimized = await optimize(svg)
+    // remove semicolon inserted by prettier
+    // because prettier thinks it's formatting JSX not HTML
+    .then(svg => svg.replace(/;/g, ''))
+    .then(removeSVGElement)
+  return optimized;
+}
+
+module.exports = processSvg;

bin/template.js

+const defaultAttrs = {
+  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: '...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 }

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"
+  }
+]
\ No newline at end of file

package.json

+{
+  "name": "juuust-icon",
+  "version": "0.1.2",
+  "description": "Icon automation workflow with Figma",
+  "main": "dist/index.js",
+  "module": "build/index.js",
+  "typings": "build/index.d.ts",
+  "files": [
+    "dist",
+    "es"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": "https://github.com/leadream/juuust-icon.git",
+  "author": "leadream",
+  "keywords": [
+    "react",
+    "icons",
+    "svg",
+    "inline",
+    "figma",
+    "juuust",
+    "design"
+  ],
+  "bugs": {
+    "url": "https://github.com/leadream/juuust-icon/issues"
+  },
+  "homepage": "https://github.com/leadream/juuust-icon#readme",
+  "scripts": {
+    "generate": "rm -rf src/icons && node bin/build.js",
+    "build:bundle": "rm -rf dist && rollup --config rollup.config.js",
+    "build:es": "rm -rf build && babel src --out-dir build --copy-files",
+    "build": "concurrently \"yarn:build:*\""
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "cheerio": "^1.0.0-rc.3",
+    "concurrently": "^4.1.1",
+    "prettier-eslint": "^9.0.0",
+    "rollup": "^1.19.4",
+    "rollup-plugin-babel": "^4.3.3",
+    "svgo": "^1.3.0",
+    "uppercamelcase": "^3.0.0"
+  }
+}

rollup.config.js

+import babel from 'rollup-plugin-babel';
+
+export default {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/index.js',
+    format: 'cjs',
+  },
+  external: ['react', 'prop-types'],
+  plugins: [
+    babel({
+      exclude: 'node_modules/**',
+    }),
+  ],
+};

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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';