首次提交，多多关照

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