首次提交，多多关照

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

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