├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── images ├── default-color-icon.png ├── icons.png ├── multi-color-icon.png ├── one-color-icon.png └── symbol-url.png ├── localSvgs ├── classSvg.svg ├── inlineStyle.svg ├── normal.svg └── style.svg ├── package.json ├── publish.sh ├── scripts ├── config │ ├── demo-js-nonurl.json │ ├── demo-js.json │ ├── demo-ts-nonurl.json │ └── demo-ts.json └── update-snapshot.sh ├── snapshots ├── demo-js-nonurl │ ├── IconClassSvg.d.ts │ ├── IconClassSvg.js │ ├── IconInlineStyle.d.ts │ ├── IconInlineStyle.js │ ├── IconNormal.d.ts │ ├── IconNormal.js │ ├── IconStyle.d.ts │ ├── IconStyle.js │ ├── helper.d.ts │ ├── helper.js │ ├── index.d.ts │ └── index.js ├── demo-js │ ├── IconAlipay.d.ts │ ├── IconAlipay.js │ ├── IconClassSvg.d.ts │ ├── IconClassSvg.js │ ├── IconInlineStyle.d.ts │ ├── IconInlineStyle.js │ ├── IconNormal.d.ts │ ├── IconNormal.js │ ├── IconSetup.d.ts │ ├── IconSetup.js │ ├── IconStyle.d.ts │ ├── IconStyle.js │ ├── IconUser.d.ts │ ├── IconUser.js │ ├── helper.d.ts │ ├── helper.js │ ├── index.d.ts │ └── index.js ├── demo-ts-nonurl │ ├── IconClassSvg.tsx │ ├── IconInlineStyle.tsx │ ├── IconNormal.tsx │ ├── IconStyle.tsx │ ├── helper.ts │ └── index.tsx └── demo-ts │ ├── IconAlipay.tsx │ ├── IconClassSvg.tsx │ ├── IconInlineStyle.tsx │ ├── IconNormal.tsx │ ├── IconSetup.tsx │ ├── IconStyle.tsx │ ├── IconUser.tsx │ ├── helper.ts │ └── index.tsx ├── src ├── commands │ ├── createIcon.ts │ ├── createJson.ts │ └── help.ts ├── libs │ ├── copyTemplate.ts │ ├── generateComponent.ts │ ├── getConfig.ts │ ├── getTemplate.ts │ ├── iconfont.json │ ├── parseLocalSvg.ts │ ├── replace.ts │ └── whitespace.ts └── templates │ ├── Icon.d.ts.template │ ├── Icon.js.template │ ├── Icon.tsx.template │ ├── LocalSingleIcon.js.template │ ├── LocalSingleIcon.tsx.template │ ├── SingleIcon.d.ts.template │ ├── SingleIcon.js.template │ ├── SingleIcon.tsx.template │ ├── helper.d.ts.template │ ├── helper.js.template │ └── helper.ts.template ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [.*] 12 | insert_final_newline = false 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.log 3 | .idea/ 4 | build/ 5 | src/iconfont 6 | /iconfont.json 7 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 原罪 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## react-native-iconfont-cli 2 | 用纯JS把iconfont.cn的图标转换成RN组件，不依赖字体，支持多色彩，支持热更新 3 | 4 | ![](https://github.com/fwh1990/react-native-iconfont-cli/blob/master/images/icons.png?raw=true) 5 | 6 | ## 痛点 7 | 8 | 通常地，当我们想在RN里使用iconfont，我们可能会借助`react-native-vector-icons`导入ttf字体文件，或者直接手动下载各个svg文件到本地，然后单个使用。 9 | 10 | 使用ttf字体有一个弊端，就是每次更新图标，都要相应的更新ttf文件，然后再次打包发布APP。而且ttf不支持多种色彩的图标，导致所有图标都是单色。如果你是借助`react-native-vector-icons`，该库内置了10多套ttf文件，合起来有`2M`左右；你可能用不到它们，但是它们仍然会被打包进你的APP里。 11 | 12 | 下载svg到本地也不方便，因为你需要额外维护一份图标字体，有可能造成线上和本地的图标不一致问题。而且如果你想动态地改变svg的渲染色彩，基本上是不可能的，只能渲染原图的颜色。 13 | 14 | -------- 15 | 16 | 为了解决这些问题，我用纯Javascript实现iconfont到React组件的转换操作，**不需要依赖ttf字体文件**，不需要手动下载图标到本地。 17 | 18 | ## 特性 19 | 20 | 1、纯组件，不依赖字体，体积小 21 |
22 | 2、支持渲染多色彩图标，支持自定义颜色 23 |
24 | 3、支持热更新 25 |
26 | 4、自动化生成图标组件，支持es6和typescript两种文件格式 27 | 28 | ## Step 1 29 | 安装插件 30 | ```bash 31 | # Yarn 32 | yarn add react-native-svg 33 | yarn add react-native-iconfont-cli --dev 34 | 35 | # Npm 36 | npm install react-native-svg 37 | npm install react-native-iconfont-cli --save-dev 38 | ``` 39 | 40 | # Step 2 41 | 静态链接。请注意您使用的React-Native版本号 42 | ```bash 43 | # RN < 0.60 44 | react-native link react-native-svg 45 | 46 | # RN >= 0.60 47 | cd ios && pod install 48 | ``` 49 | 50 | # Step 3 51 | 生成配置文件 52 | ```bash 53 | npx iconfont-init 54 | ``` 55 | 此时项目根目录会生成一个`iconfont.json`的文件，内容如下： 56 | ```json 57 | { 58 | "symbol_url": "请参考README.md，复制官网提供的JS链接", 59 | "use_typescript": false, 60 | "save_dir": "./src/iconfont", 61 | "trim_icon_prefix": "icon", 62 | "default_icon_size": 18, 63 | "local_svgs": "./localSvgs" 64 | } 65 | ``` 66 | ### 配置参数说明： 67 | ### symbol_url 68 | 请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js` 69 | 70 |
71 | 72 | ![](https://github.com/fwh1990/react-native-iconfont-cli/blob/master/images/symbol-url.png?raw=true) 73 | 74 | ### use_typescript 75 | 如果您的项目使用Typescript编写，请设置为true。这个选项将决定生成的图标组件是`.tsx`还是`.js`后缀。 76 | 77 | 当该值为false时，我们会为您的图标生成`.js`和`.d.ts`两种文件，以便您能享受到最好的开发体验。 78 | 79 | ### save_dir 80 | 根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。 81 | 82 | ### trim_icon_prefix 83 | 如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。 84 | 85 | ### default_icon_size 86 | 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。 87 | 88 | ### local_svgs 89 | 本地 svg 的路径, 配置此项后在路径中添加 svg 文件即可。支持渐变图标（iconfont官网不能上传渐变图标）。 90 | 91 | **注 1: 暂不支持 `color` 参数** 92 |
93 | **注 2: 如果启用该功能，请确保`react-native-svg`的版本`>=9.13.0`** 94 | 95 | 96 | # Step 4 97 | 开始生成React-Native标准组件 98 | ```bash 99 | npx iconfont-rn 100 | ``` 101 | 102 | 生成后查看您设置的保存目录中是否含有所有的图标，你可以参考[snapshots目录](https://github.com/iconfont-cli/react-native-iconfont-cli/tree/master/snapshots)的快照文件，以区分不同模式下的图标结构。 103 | 104 | # 使用 105 |
106 | 现在我们提供了两种引入方式供您选择： 107 | 108 | 1、使用汇总`Icon`组件： 109 | ```typescript jsx 110 | import IconFont from '../src/iconfont'; 111 | 112 | export const App = () => { 113 | return ( 114 | 115 | 116 | 117 | 118 | ); 119 | }; 120 | ``` 121 | 122 | 2、使用单个图标。这样可以避免没用到的图标也打包进App： 123 | 124 | ```typescript jsx 125 | import IconAlipay from '../src/iconfont/IconAlipay'; 126 | import IconWechat from '../src/iconfont/IconWechat'; 127 | 128 | export const App = () => { 129 | return ( 130 | 131 | 132 | 133 | 134 | ); 135 | }; 136 | ``` 137 | 138 | ### 图标尺寸 139 | 根据配置`default_icon_size`，每个图标都会有一个默认的尺寸，你可以随时覆盖。 140 | ```typescript jsx 141 | 142 | ``` 143 | ![](https://github.com/fwh1990/react-native-iconfont-cli/blob/master/images/default-color-icon.png?raw=true) 144 | ### 图标单色 145 | 单色图标，如果不指定颜色值，图标将渲染原本的颜色。如果你想设置为其他的颜色，那么设置一个你想要的颜色即可。 146 | 147 | **注意：如果你在props传入的color是字符串而不是数组，那么即使原本是多色彩的图标，也会变成单色图标。** 148 | 149 | ```typescript jsx 150 | 151 | ``` 152 | ![](https://github.com/fwh1990/react-native-iconfont-cli/blob/master/images/one-color-icon.png?raw=true) 153 | 154 | ### 图标多色彩 155 | 多色彩的图标，如果不指定颜色值，图标将渲染原本的多色彩。如果你想设置为其他的颜色，那么设置一组你想要的颜色即可 156 | ```typescript jsx 157 | 158 | ``` 159 | 颜色组的数量以及排序，需要根据当前图标的信息来确定。您需要进入图标组件中查看并得出结论。 160 | 161 | 162 | ![](https://github.com/fwh1990/react-native-iconfont-cli/blob/master/images/multi-color-icon.png?raw=true) 163 | 164 | # 更新图标 165 | 当您在iconfont.cn中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 4`即可生成最新的图标组件 166 | ```bash 167 | # 修改 symbol_url 配置后执行： 168 | npx iconfont-rn 169 | ``` 170 | 171 | 172 | 欢迎使用，并给我一些反馈和建议，让这个库做的更好 173 | -------------------------------------------------------------------------------- /images/default-color-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iconfont-cli/react-native-iconfont-cli/036e1d5d02bb21ca375d9628d95da0cce40eb0da/images/default-color-icon.png -------------------------------------------------------------------------------- /images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iconfont-cli/react-native-iconfont-cli/036e1d5d02bb21ca375d9628d95da0cce40eb0da/images/icons.png -------------------------------------------------------------------------------- /images/multi-color-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iconfont-cli/react-native-iconfont-cli/036e1d5d02bb21ca375d9628d95da0cce40eb0da/images/multi-color-icon.png -------------------------------------------------------------------------------- /images/one-color-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iconfont-cli/react-native-iconfont-cli/036e1d5d02bb21ca375d9628d95da0cce40eb0da/images/one-color-icon.png -------------------------------------------------------------------------------- /images/symbol-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iconfont-cli/react-native-iconfont-cli/036e1d5d02bb21ca375d9628d95da0cce40eb0da/images/symbol-url.png -------------------------------------------------------------------------------- /localSvgs/classSvg.svg: -------------------------------------------------------------------------------- 1 | 2 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /localSvgs/inlineStyle.svg: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /localSvgs/normal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /localSvgs/style.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-iconfont-cli", 3 | "version": "2.2.4", 4 | "main": "index.js", 5 | "keywords": [ 6 | "iconfont", 7 | "react-native", 8 | "react-native-iconfont", 9 | "icon", 10 | "icons", 11 | "iconfont.cn" 12 | ], 13 | "repository": "git@github.com:iconfont-cli/react-native-iconfont-cli.git", 14 | "author": "范文华 <531362022@qq.com>", 15 | "license": "MIT", 16 | "bin": { 17 | "iconfont": "./commands/help.js", 18 | "iconfont-init": "./commands/createJson.js", 19 | "iconfont-rn": "./commands/createIcon.js" 20 | }, 21 | "peerDependencies": { 22 | "react": "*", 23 | "react-native": "*", 24 | "react-native-svg": ">=9.7.0" 25 | }, 26 | "dependencies": { 27 | "colors": "^1.3.3", 28 | "glob": "^7.1.4", 29 | "iconfont-parser": "^1.0.0", 30 | "lodash": "^4.17.15", 31 | "minimist": "^1.2.5", 32 | "mkdirp": "^0.5.1", 33 | "tslib": "^1.10.0" 34 | }, 35 | "devDependencies": { 36 | "@types/glob": "^7.1.1", 37 | "@types/lodash": "^4.14.137", 38 | "@types/minimist": "^1.2.0", 39 | "@types/mkdirp": "^0.5.2", 40 | "@types/node": "^12.7.2", 41 | "@types/react": "^16.9.46", 42 | "@types/react-native": "^0.63.8", 43 | "react": "^16.9.0", 44 | "react-native": "^0.63.2", 45 | "react-native-svg": "9.13.0", 46 | "ts-node": "^8.3.0", 47 | "typescript": "^3.9.7" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /publish.sh: -------------------------------------------------------------------------------- 1 | set -e 2 | 3 | rm -rf ./build 4 | rm -rf ./src/iconfont 5 | 6 | ./node_modules/.bin/tsc 7 | 8 | mv ./build/src/* ./build 9 | rm -rf ./build/src ./build/snapshots 10 | cp README.md package.json LICENSE ./build 11 | cp -rf src/templates ./build/templates 12 | 13 | old_registry=$(npm config get registry) 14 | npm config set registry https://registry.npmjs.org 15 | set +e 16 | whoami=$(npm whoami 2>/dev/null) 17 | set -e 18 | 19 | if [ -z "$whoami" ] 20 | then 21 | echo "login plz..." 22 | npm login 23 | fi 24 | echo "I am: $(npm whoami)" 25 | 26 | sleep 1 27 | echo "Begin publish..." 28 | npm publish ./build/ --access=public "$@" 29 | 30 | npm config set registry ${old_registry} 31 | -------------------------------------------------------------------------------- /scripts/config/demo-js-nonurl.json: -------------------------------------------------------------------------------- 1 | { 2 | "use_typescript": false, 3 | "save_dir": "./snapshots/demo-js-nonurl", 4 | "trim_icon_prefix": "icon", 5 | "default_icon_size": 18, 6 | "local_svgs": "./localSvgs" 7 | } 8 | -------------------------------------------------------------------------------- /scripts/config/demo-js.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js", 3 | "use_typescript": false, 4 | "save_dir": "./snapshots/demo-js", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 18, 7 | "local_svgs": "./localSvgs" 8 | } 9 | -------------------------------------------------------------------------------- /scripts/config/demo-ts-nonurl.json: -------------------------------------------------------------------------------- 1 | { 2 | "use_typescript": true, 3 | "save_dir": "./snapshots/demo-ts-nonurl", 4 | "trim_icon_prefix": "icon", 5 | "default_icon_size": 20, 6 | "local_svgs": "./localSvgs" 7 | } 8 | -------------------------------------------------------------------------------- /scripts/config/demo-ts.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js", 3 | "use_typescript": true, 4 | "save_dir": "./snapshots/demo-ts", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 20, 7 | "local_svgs": "./localSvgs" 8 | } 9 | -------------------------------------------------------------------------------- /scripts/update-snapshot.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | rm -rf snapshots/* 4 | 5 | cp -f ./scripts/config/demo-js.json ./iconfont.json 6 | npx ts-node src/commands/createIcon.ts 7 | 8 | cp -f ./scripts/config/demo-ts.json ./iconfont.json 9 | npx ts-node src/commands/createIcon.ts 10 | 11 | cp -f ./scripts/config/demo-js-nonurl.json ./iconfont.json 12 | npx ts-node src/commands/createIcon.ts 13 | 14 | cp -f ./scripts/config/demo-ts-nonurl.json ./iconfont.json 15 | npx ts-node src/commands/createIcon.ts 16 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/IconClassSvg.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconClassSvg: FunctionComponent; 14 | 15 | export default IconClassSvg; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/IconClassSvg.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { SvgCss } from 'react-native-svg'; 5 | 6 | const xml = ` 7 | 8 | 22 | 23 | 24 | 25 | 26 | ` 27 | 28 | let IconClassSvg = ({ size, color, ...rest }) => { 29 | return ( 30 | 31 | ); 32 | }; 33 | 34 | IconClassSvg.defaultProps = { 35 | size: 18, 36 | }; 37 | 38 | IconClassSvg = React.memo ? React.memo(IconClassSvg) : IconClassSvg; 39 | 40 | export default IconClassSvg; 41 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/IconInlineStyle.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconInlineStyle: FunctionComponent; 14 | 15 | export default IconInlineStyle; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/IconInlineStyle.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { SvgCss } from 'react-native-svg'; 5 | 6 | const xml = ` 7 | 8 | 18 | 19 | 20 | ` 21 | 22 | let IconInlineStyle = ({ size, color, ...rest }) => { 23 | return ( 24 | 25 | ); 26 | }; 27 | 28 | IconInlineStyle.defaultProps = { 29 | size: 18, 30 | }; 31 | 32 | IconInlineStyle = React.memo ? React.memo(IconInlineStyle) : IconInlineStyle; 33 | 34 | export default IconInlineStyle; 35 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/IconNormal.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconNormal: FunctionComponent; 14 | 15 | export default IconNormal; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/IconNormal.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { SvgXml } from 'react-native-svg'; 5 | 6 | const xml = ` 7 | 8 | 9 | 10 | ` 11 | 12 | let IconNormal = ({ size, color, ...rest }) => { 13 | return ( 14 | 15 | ); 16 | }; 17 | 18 | IconNormal.defaultProps = { 19 | size: 18, 20 | }; 21 | 22 | IconNormal = React.memo ? React.memo(IconNormal) : IconNormal; 23 | 24 | export default IconNormal; 25 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/IconStyle.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconStyle: FunctionComponent; 14 | 15 | export default IconStyle; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/IconStyle.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { SvgXml } from 'react-native-svg'; 5 | 6 | const xml = ` 7 | 8 | 9 | 10 | ` 11 | 12 | let IconStyle = ({ size, color, ...rest }) => { 13 | return ( 14 | 15 | ); 16 | }; 17 | 18 | IconStyle.defaultProps = { 19 | size: 18, 20 | }; 21 | 22 | IconStyle = React.memo ? React.memo(IconStyle) : IconStyle; 23 | 24 | export default IconStyle; 25 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/helper.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | export declare const getIconColor: (color: string | string[] | undefined, index: number, defaultColor: string) => string; 4 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/helper.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | /** 4 | * @param {string | string[] | undefined} color 5 | * @param {number} index 6 | * @param {string} defaultColor 7 | * @return {string} 8 | */ 9 | export const getIconColor = (color, index, defaultColor) => { 10 | return color 11 | ? ( 12 | typeof color === 'string' 13 | ? color 14 | : color[index] || defaultColor 15 | ) 16 | : defaultColor; 17 | }; 18 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/index.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | export { default as IconClassSvg } from './IconClassSvg'; 9 | export { default as IconInlineStyle } from './IconInlineStyle'; 10 | export { default as IconNormal } from './IconNormal'; 11 | export { default as IconStyle } from './IconStyle'; 12 | 13 | interface Props extends GProps, ViewProps { 14 | name: 'classSvg' | 'inlineStyle' | 'normal' | 'style'; 15 | size?: number; 16 | color?: string | string[]; 17 | } 18 | 19 | declare const IconFont: FunctionComponent; 20 | 21 | export default IconFont; 22 | -------------------------------------------------------------------------------- /snapshots/demo-js-nonurl/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | 5 | import IconClassSvg from './IconClassSvg'; 6 | import IconInlineStyle from './IconInlineStyle'; 7 | import IconNormal from './IconNormal'; 8 | import IconStyle from './IconStyle'; 9 | export { default as IconClassSvg } from './IconClassSvg'; 10 | export { default as IconInlineStyle } from './IconInlineStyle'; 11 | export { default as IconNormal } from './IconNormal'; 12 | export { default as IconStyle } from './IconStyle'; 13 | 14 | let IconFont = ({ name, ...rest }) => { 15 | switch (name) { 16 | case 'classSvg': 17 | return ; 18 | case 'inlineStyle': 19 | return ; 20 | case 'normal': 21 | return ; 22 | case 'style': 23 | return ; 24 | } 25 | 26 | return null; 27 | }; 28 | 29 | IconFont = React.memo ? React.memo(IconFont) : IconFont; 30 | 31 | export default IconFont; 32 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconAlipay.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconAlipay: FunctionComponent; 14 | 15 | export default IconAlipay; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconAlipay.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { Svg, Path } from 'react-native-svg'; 5 | import { getIconColor } from './helper'; 6 | 7 | let IconAlipay = ({ size, color, ...rest }) => { 8 | return ( 9 | 10 | 14 | 18 | 19 | ); 20 | }; 21 | 22 | IconAlipay.defaultProps = { 23 | size: 18, 24 | }; 25 | 26 | IconAlipay = React.memo ? React.memo(IconAlipay) : IconAlipay; 27 | 28 | export default IconAlipay; 29 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconClassSvg.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconClassSvg: FunctionComponent; 14 | 15 | export default IconClassSvg; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconClassSvg.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { SvgCss } from 'react-native-svg'; 5 | 6 | const xml = ` 7 | 8 | 22 | 23 | 24 | 25 | 26 | ` 27 | 28 | let IconClassSvg = ({ size, color, ...rest }) => { 29 | return ( 30 | 31 | ); 32 | }; 33 | 34 | IconClassSvg.defaultProps = { 35 | size: 18, 36 | }; 37 | 38 | IconClassSvg = React.memo ? React.memo(IconClassSvg) : IconClassSvg; 39 | 40 | export default IconClassSvg; 41 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconInlineStyle.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconInlineStyle: FunctionComponent; 14 | 15 | export default IconInlineStyle; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconInlineStyle.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { SvgCss } from 'react-native-svg'; 5 | 6 | const xml = ` 7 | 8 | 18 | 19 | 20 | ` 21 | 22 | let IconInlineStyle = ({ size, color, ...rest }) => { 23 | return ( 24 | 25 | ); 26 | }; 27 | 28 | IconInlineStyle.defaultProps = { 29 | size: 18, 30 | }; 31 | 32 | IconInlineStyle = React.memo ? React.memo(IconInlineStyle) : IconInlineStyle; 33 | 34 | export default IconInlineStyle; 35 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconNormal.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconNormal: FunctionComponent; 14 | 15 | export default IconNormal; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconNormal.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { SvgXml } from 'react-native-svg'; 5 | 6 | const xml = ` 7 | 8 | 9 | 10 | ` 11 | 12 | let IconNormal = ({ size, color, ...rest }) => { 13 | return ( 14 | 15 | ); 16 | }; 17 | 18 | IconNormal.defaultProps = { 19 | size: 18, 20 | }; 21 | 22 | IconNormal = React.memo ? React.memo(IconNormal) : IconNormal; 23 | 24 | export default IconNormal; 25 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconSetup.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconSetup: FunctionComponent; 14 | 15 | export default IconSetup; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconSetup.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { Svg, Path } from 'react-native-svg'; 5 | import { getIconColor } from './helper'; 6 | 7 | let IconSetup = ({ size, color, ...rest }) => { 8 | return ( 9 | 10 | 14 | 18 | 23 | 27 | 31 | 36 | 40 | 45 | 49 | 54 | 55 | ); 56 | }; 57 | 58 | IconSetup.defaultProps = { 59 | size: 18, 60 | }; 61 | 62 | IconSetup = React.memo ? React.memo(IconSetup) : IconSetup; 63 | 64 | export default IconSetup; 65 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconStyle.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconStyle: FunctionComponent; 14 | 15 | export default IconStyle; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconStyle.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { SvgXml } from 'react-native-svg'; 5 | 6 | const xml = ` 7 | 8 | 9 | 10 | ` 11 | 12 | let IconStyle = ({ size, color, ...rest }) => { 13 | return ( 14 | 15 | ); 16 | }; 17 | 18 | IconStyle.defaultProps = { 19 | size: 18, 20 | }; 21 | 22 | IconStyle = React.memo ? React.memo(IconStyle) : IconStyle; 23 | 24 | export default IconStyle; 25 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconUser.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const IconUser: FunctionComponent; 14 | 15 | export default IconUser; 16 | -------------------------------------------------------------------------------- /snapshots/demo-js/IconUser.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import { Svg, Path } from 'react-native-svg'; 5 | import { getIconColor } from './helper'; 6 | 7 | let IconUser = ({ size, color, ...rest }) => { 8 | return ( 9 | 10 | 14 | 18 | 19 | ); 20 | }; 21 | 22 | IconUser.defaultProps = { 23 | size: 18, 24 | }; 25 | 26 | IconUser = React.memo ? React.memo(IconUser) : IconUser; 27 | 28 | export default IconUser; 29 | -------------------------------------------------------------------------------- /snapshots/demo-js/helper.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | export declare const getIconColor: (color: string | string[] | undefined, index: number, defaultColor: string) => string; 4 | -------------------------------------------------------------------------------- /snapshots/demo-js/helper.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | /** 4 | * @param {string | string[] | undefined} color 5 | * @param {number} index 6 | * @param {string} defaultColor 7 | * @return {string} 8 | */ 9 | export const getIconColor = (color, index, defaultColor) => { 10 | return color 11 | ? ( 12 | typeof color === 'string' 13 | ? color 14 | : color[index] || defaultColor 15 | ) 16 | : defaultColor; 17 | }; 18 | -------------------------------------------------------------------------------- /snapshots/demo-js/index.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | export { default as IconAlipay } from './IconAlipay'; 9 | export { default as IconUser } from './IconUser'; 10 | export { default as IconSetup } from './IconSetup'; 11 | export { default as IconClassSvg } from './IconClassSvg'; 12 | export { default as IconInlineStyle } from './IconInlineStyle'; 13 | export { default as IconNormal } from './IconNormal'; 14 | export { default as IconStyle } from './IconStyle'; 15 | 16 | interface Props extends GProps, ViewProps { 17 | name: 'alipay' | 'user' | 'setup' | 'classSvg' | 'inlineStyle' | 'normal' | 'style'; 18 | size?: number; 19 | color?: string | string[]; 20 | } 21 | 22 | declare const IconFont: FunctionComponent; 23 | 24 | export default IconFont; 25 | -------------------------------------------------------------------------------- /snapshots/demo-js/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | 5 | import IconAlipay from './IconAlipay'; 6 | import IconUser from './IconUser'; 7 | import IconSetup from './IconSetup'; 8 | import IconClassSvg from './IconClassSvg'; 9 | import IconInlineStyle from './IconInlineStyle'; 10 | import IconNormal from './IconNormal'; 11 | import IconStyle from './IconStyle'; 12 | export { default as IconAlipay } from './IconAlipay'; 13 | export { default as IconUser } from './IconUser'; 14 | export { default as IconSetup } from './IconSetup'; 15 | export { default as IconClassSvg } from './IconClassSvg'; 16 | export { default as IconInlineStyle } from './IconInlineStyle'; 17 | export { default as IconNormal } from './IconNormal'; 18 | export { default as IconStyle } from './IconStyle'; 19 | 20 | let IconFont = ({ name, ...rest }) => { 21 | switch (name) { 22 | case 'alipay': 23 | return ; 24 | case 'user': 25 | return ; 26 | case 'setup': 27 | return ; 28 | case 'classSvg': 29 | return ; 30 | case 'inlineStyle': 31 | return ; 32 | case 'normal': 33 | return ; 34 | case 'style': 35 | return ; 36 | } 37 | 38 | return null; 39 | }; 40 | 41 | IconFont = React.memo ? React.memo(IconFont) : IconFont; 42 | 43 | export default IconFont; 44 | -------------------------------------------------------------------------------- /snapshots/demo-ts-nonurl/IconClassSvg.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps, SvgCss } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | const xml = ` 14 | 15 | 29 | 30 | 31 | 32 | 33 | ` 34 | 35 | let IconClassSvg: FunctionComponent = ({ size, color, ...rest }) => { 36 | return ( 37 | 38 | ); 39 | }; 40 | 41 | IconClassSvg.defaultProps = { 42 | size: 20, 43 | }; 44 | 45 | IconClassSvg = React.memo ? React.memo(IconClassSvg) : IconClassSvg; 46 | 47 | export default IconClassSvg; 48 | -------------------------------------------------------------------------------- /snapshots/demo-ts-nonurl/IconInlineStyle.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps, SvgCss } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | const xml = ` 14 | 15 | 25 | 26 | 27 | ` 28 | 29 | let IconInlineStyle: FunctionComponent = ({ size, color, ...rest }) => { 30 | return ( 31 | 32 | ); 33 | }; 34 | 35 | IconInlineStyle.defaultProps = { 36 | size: 20, 37 | }; 38 | 39 | IconInlineStyle = React.memo ? React.memo(IconInlineStyle) : IconInlineStyle; 40 | 41 | export default IconInlineStyle; 42 | -------------------------------------------------------------------------------- /snapshots/demo-ts-nonurl/IconNormal.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps, SvgXml } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | const xml = ` 14 | 15 | 16 | 17 | ` 18 | 19 | let IconNormal: FunctionComponent = ({ size, color, ...rest }) => { 20 | return ( 21 | 22 | ); 23 | }; 24 | 25 | IconNormal.defaultProps = { 26 | size: 20, 27 | }; 28 | 29 | IconNormal = React.memo ? React.memo(IconNormal) : IconNormal; 30 | 31 | export default IconNormal; 32 | -------------------------------------------------------------------------------- /snapshots/demo-ts-nonurl/IconStyle.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps, SvgXml } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | const xml = ` 14 | 15 | 16 | 17 | ` 18 | 19 | let IconStyle: FunctionComponent = ({ size, color, ...rest }) => { 20 | return ( 21 | 22 | ); 23 | }; 24 | 25 | IconStyle.defaultProps = { 26 | size: 20, 27 | }; 28 | 29 | IconStyle = React.memo ? React.memo(IconStyle) : IconStyle; 30 | 31 | export default IconStyle; 32 | -------------------------------------------------------------------------------- /snapshots/demo-ts-nonurl/helper.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => { 5 | return color 6 | ? ( 7 | typeof color === 'string' 8 | ? color 9 | : color[index] || defaultColor 10 | ) 11 | : defaultColor; 12 | }; 13 | -------------------------------------------------------------------------------- /snapshots/demo-ts-nonurl/index.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | import IconClassSvg from './IconClassSvg'; 8 | import IconInlineStyle from './IconInlineStyle'; 9 | import IconNormal from './IconNormal'; 10 | import IconStyle from './IconStyle'; 11 | export { default as IconClassSvg } from './IconClassSvg'; 12 | export { default as IconInlineStyle } from './IconInlineStyle'; 13 | export { default as IconNormal } from './IconNormal'; 14 | export { default as IconStyle } from './IconStyle'; 15 | 16 | export type IconNames = 'classSvg' | 'inlineStyle' | 'normal' | 'style'; 17 | 18 | interface Props extends GProps, ViewProps { 19 | name: IconNames; 20 | size?: number; 21 | color?: string | string[]; 22 | } 23 | 24 | let IconFont: FunctionComponent = ({ name, ...rest }) => { 25 | switch (name) { 26 | case 'classSvg': 27 | return ; 28 | case 'inlineStyle': 29 | return ; 30 | case 'normal': 31 | return ; 32 | case 'style': 33 | return ; 34 | } 35 | 36 | return null; 37 | }; 38 | 39 | IconFont = React.memo ? React.memo(IconFont) : IconFont; 40 | 41 | export default IconFont; 42 | -------------------------------------------------------------------------------- /snapshots/demo-ts/IconAlipay.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { Svg, GProps, Path } from 'react-native-svg'; 7 | import { getIconColor } from './helper'; 8 | 9 | interface Props extends GProps, ViewProps { 10 | size?: number; 11 | color?: string | string[]; 12 | } 13 | 14 | let IconAlipay: FunctionComponent = ({ size, color, ...rest }) => { 15 | return ( 16 | 17 | 21 | 25 | 26 | ); 27 | }; 28 | 29 | IconAlipay.defaultProps = { 30 | size: 20, 31 | }; 32 | 33 | IconAlipay = React.memo ? React.memo(IconAlipay) : IconAlipay; 34 | 35 | export default IconAlipay; 36 | -------------------------------------------------------------------------------- /snapshots/demo-ts/IconClassSvg.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps, SvgCss } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | const xml = ` 14 | 15 | 29 | 30 | 31 | 32 | 33 | ` 34 | 35 | let IconClassSvg: FunctionComponent = ({ size, color, ...rest }) => { 36 | return ( 37 | 38 | ); 39 | }; 40 | 41 | IconClassSvg.defaultProps = { 42 | size: 20, 43 | }; 44 | 45 | IconClassSvg = React.memo ? React.memo(IconClassSvg) : IconClassSvg; 46 | 47 | export default IconClassSvg; 48 | -------------------------------------------------------------------------------- /snapshots/demo-ts/IconInlineStyle.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps, SvgCss } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | const xml = ` 14 | 15 | 25 | 26 | 27 | ` 28 | 29 | let IconInlineStyle: FunctionComponent = ({ size, color, ...rest }) => { 30 | return ( 31 | 32 | ); 33 | }; 34 | 35 | IconInlineStyle.defaultProps = { 36 | size: 20, 37 | }; 38 | 39 | IconInlineStyle = React.memo ? React.memo(IconInlineStyle) : IconInlineStyle; 40 | 41 | export default IconInlineStyle; 42 | -------------------------------------------------------------------------------- /snapshots/demo-ts/IconNormal.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps, SvgXml } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | const xml = ` 14 | 15 | 16 | 17 | ` 18 | 19 | let IconNormal: FunctionComponent = ({ size, color, ...rest }) => { 20 | return ( 21 | 22 | ); 23 | }; 24 | 25 | IconNormal.defaultProps = { 26 | size: 20, 27 | }; 28 | 29 | IconNormal = React.memo ? React.memo(IconNormal) : IconNormal; 30 | 31 | export default IconNormal; 32 | -------------------------------------------------------------------------------- /snapshots/demo-ts/IconSetup.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { Svg, GProps, Path } from 'react-native-svg'; 7 | import { getIconColor } from './helper'; 8 | 9 | interface Props extends GProps, ViewProps { 10 | size?: number; 11 | color?: string | string[]; 12 | } 13 | 14 | let IconSetup: FunctionComponent = ({ size, color, ...rest }) => { 15 | return ( 16 | 17 | 21 | 25 | 30 | 34 | 38 | 43 | 47 | 52 | 56 | 61 | 62 | ); 63 | }; 64 | 65 | IconSetup.defaultProps = { 66 | size: 20, 67 | }; 68 | 69 | IconSetup = React.memo ? React.memo(IconSetup) : IconSetup; 70 | 71 | export default IconSetup; 72 | -------------------------------------------------------------------------------- /snapshots/demo-ts/IconStyle.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps, SvgXml } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | const xml = ` 14 | 15 | 16 | 17 | ` 18 | 19 | let IconStyle: FunctionComponent = ({ size, color, ...rest }) => { 20 | return ( 21 | 22 | ); 23 | }; 24 | 25 | IconStyle.defaultProps = { 26 | size: 20, 27 | }; 28 | 29 | IconStyle = React.memo ? React.memo(IconStyle) : IconStyle; 30 | 31 | export default IconStyle; 32 | -------------------------------------------------------------------------------- /snapshots/demo-ts/IconUser.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { Svg, GProps, Path } from 'react-native-svg'; 7 | import { getIconColor } from './helper'; 8 | 9 | interface Props extends GProps, ViewProps { 10 | size?: number; 11 | color?: string | string[]; 12 | } 13 | 14 | let IconUser: FunctionComponent = ({ size, color, ...rest }) => { 15 | return ( 16 | 17 | 21 | 25 | 26 | ); 27 | }; 28 | 29 | IconUser.defaultProps = { 30 | size: 20, 31 | }; 32 | 33 | IconUser = React.memo ? React.memo(IconUser) : IconUser; 34 | 35 | export default IconUser; 36 | -------------------------------------------------------------------------------- /snapshots/demo-ts/helper.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => { 5 | return color 6 | ? ( 7 | typeof color === 'string' 8 | ? color 9 | : color[index] || defaultColor 10 | ) 11 | : defaultColor; 12 | }; 13 | -------------------------------------------------------------------------------- /snapshots/demo-ts/index.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | import IconAlipay from './IconAlipay'; 8 | import IconUser from './IconUser'; 9 | import IconSetup from './IconSetup'; 10 | import IconClassSvg from './IconClassSvg'; 11 | import IconInlineStyle from './IconInlineStyle'; 12 | import IconNormal from './IconNormal'; 13 | import IconStyle from './IconStyle'; 14 | export { default as IconAlipay } from './IconAlipay'; 15 | export { default as IconUser } from './IconUser'; 16 | export { default as IconSetup } from './IconSetup'; 17 | export { default as IconClassSvg } from './IconClassSvg'; 18 | export { default as IconInlineStyle } from './IconInlineStyle'; 19 | export { default as IconNormal } from './IconNormal'; 20 | export { default as IconStyle } from './IconStyle'; 21 | 22 | export type IconNames = 'alipay' | 'user' | 'setup' | 'classSvg' | 'inlineStyle' | 'normal' | 'style'; 23 | 24 | interface Props extends GProps, ViewProps { 25 | name: IconNames; 26 | size?: number; 27 | color?: string | string[]; 28 | } 29 | 30 | let IconFont: FunctionComponent = ({ name, ...rest }) => { 31 | switch (name) { 32 | case 'alipay': 33 | return ; 34 | case 'user': 35 | return ; 36 | case 'setup': 37 | return ; 38 | case 'classSvg': 39 | return ; 40 | case 'inlineStyle': 41 | return ; 42 | case 'normal': 43 | return ; 44 | case 'style': 45 | return ; 46 | } 47 | 48 | return null; 49 | }; 50 | 51 | IconFont = React.memo ? React.memo(IconFont) : IconFont; 52 | 53 | export default IconFont; 54 | -------------------------------------------------------------------------------- /src/commands/createIcon.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors' 4 | import { getConfig } from '../libs/getConfig' 5 | import { fetchXml, XmlData } from 'iconfont-parser' 6 | import { generateComponent } from '../libs/generateComponent' 7 | import parseLocalSvg from '../libs/parseLocalSvg' 8 | 9 | const config = getConfig() 10 | 11 | const localSvg = parseLocalSvg(config) 12 | 13 | if (config.symbol_url) { 14 | fetchXml(config.symbol_url).then((result) => { 15 | generateComponent(result, localSvg, config) 16 | }).catch((e) => { 17 | console.error(colors.red(e.message || 'Unknown Error')) 18 | process.exit(1) 19 | }) 20 | } else { 21 | const result: XmlData = { 22 | svg: { 23 | symbol: [] 24 | } 25 | }; 26 | 27 | generateComponent(result, localSvg, config) 28 | } 29 | -------------------------------------------------------------------------------- /src/commands/createJson.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import path from 'path'; 4 | import fs from 'fs'; 5 | import colors from 'colors'; 6 | 7 | const targetFile = path.resolve('iconfont.json'); 8 | 9 | if (fs.existsSync(targetFile)) { 10 | console.error(colors.red('File "iconfont.json" was created before.')); 11 | } else { 12 | fs.copyFileSync(path.join(__dirname, '../libs/iconfont.json'), targetFile); 13 | console.log(colors.green('File "iconfont.json" is created now. We recommend you add it to version control.')); 14 | } 15 | -------------------------------------------------------------------------------- /src/commands/help.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import colors from 'colors'; 4 | 5 | console.log([ 6 | '', 7 | 'Usage:', 8 | '', 9 | ' ' + colors.yellow('iconfont-init') + ' : generate config file', 10 | ' ' + colors.yellow('iconfont-rn') + ' : generate icon components', 11 | '', 12 | ].join('\n')); 13 | -------------------------------------------------------------------------------- /src/libs/copyTemplate.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path from 'path'; 3 | 4 | export const copyTemplate = (fromFile: string, toFile: string) => { 5 | return fs.copyFileSync( 6 | path.join(__dirname, `../templates/${fromFile}.template`), 7 | toFile, 8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /src/libs/generateComponent.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path from 'path'; 3 | import mkdirp from 'mkdirp'; 4 | import glob from 'glob'; 5 | import colors from 'colors'; 6 | import { camelCase, upperFirst } from 'lodash'; 7 | import { XmlData } from 'iconfont-parser'; 8 | import { Config } from './getConfig'; 9 | import { getTemplate } from './getTemplate'; 10 | import { 11 | replaceCases, 12 | replaceComponentName, 13 | replaceImports, 14 | replaceExports, 15 | replaceNames, 16 | replaceNamesArray, 17 | replaceSingleIconContent, 18 | replaceSize, 19 | replaceSvgComponents, 20 | replaceHelper, 21 | replaceComponentXml, 22 | } from './replace' 23 | import { whitespace } from './whitespace'; 24 | import { copyTemplate } from './copyTemplate'; 25 | import { ILocalSvg } from '../libs/parseLocalSvg'; 26 | 27 | const SVG_MAP = { 28 | path: 'Path', 29 | }; 30 | 31 | const ATTRIBUTE_FILL_MAP = ['path']; 32 | 33 | export const generateComponent = (data: XmlData, localSvg: ILocalSvg[], config: Config) => { 34 | const svgComponents: Set = new Set(); 35 | const names: string[] = []; 36 | const imports: string[] = []; 37 | const saveDir = path.resolve(config.save_dir); 38 | const jsxExtension = config.use_typescript ? '.tsx' : '.js'; 39 | const jsExtension = config.use_typescript ? '.ts' : '.js'; 40 | let cases: string = ''; 41 | 42 | mkdirp.sync(saveDir); 43 | glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file)); 44 | 45 | if (config.use_typescript) { 46 | svgComponents.add('GProps'); 47 | } 48 | 49 | copyTemplate(`helper${jsExtension}`, path.join(saveDir, `helper${jsExtension}`)); 50 | if (!config.use_typescript) { 51 | copyTemplate('helper.d.ts', path.join(saveDir, 'helper.d.ts')); 52 | } 53 | 54 | data.svg.symbol.forEach((item, index) => { 55 | let singleFile: string; 56 | const currentSvgComponents = new Set(['Svg']); 57 | const iconId = item.$.id; 58 | const iconIdAfterTrim = config.trim_icon_prefix 59 | ? iconId.replace( 60 | new RegExp(`^${config.trim_icon_prefix}(.+?)$`), 61 | (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1') 62 | ) 63 | : iconId; 64 | const componentName = upperFirst(camelCase(iconId)); 65 | 66 | names.push(iconIdAfterTrim); 67 | 68 | if (config.use_typescript) { 69 | currentSvgComponents.add('GProps'); 70 | } 71 | 72 | for (const domName of Object.keys(item)) { 73 | switch (domName) { 74 | case 'path': 75 | currentSvgComponents.add('Path'); 76 | break; 77 | default: 78 | // no default 79 | } 80 | } 81 | 82 | cases += `${whitespace(4)}case '${iconIdAfterTrim}':\n`; 83 | 84 | imports.push(componentName); 85 | cases += `${whitespace(6)}return <${componentName} key="${index + 1}" {...rest} />;\n`; 86 | 87 | singleFile = getTemplate('SingleIcon' + jsxExtension); 88 | singleFile = replaceSize(singleFile, config.default_icon_size); 89 | singleFile = replaceSvgComponents(singleFile, currentSvgComponents); 90 | singleFile = replaceComponentName(singleFile, componentName); 91 | singleFile = replaceSingleIconContent(singleFile, generateCase(item, 4)); 92 | singleFile = replaceHelper(singleFile); 93 | 94 | fs.writeFileSync(path.join(saveDir, componentName + jsxExtension), singleFile); 95 | 96 | if (!config.use_typescript) { 97 | let typeDefinitionFile = getTemplate('SingleIcon.d.ts'); 98 | 99 | typeDefinitionFile = replaceComponentName(typeDefinitionFile, componentName); 100 | fs.writeFileSync(path.join(saveDir, componentName + '.d.ts'), typeDefinitionFile); 101 | } 102 | 103 | console.log(`${colors.green('√')} Generated icon "${colors.yellow(iconId)}"`); 104 | }); 105 | 106 | /** 107 | * 本地文件添加 108 | */ 109 | localSvg.forEach(({ name, svgStr, styleType }, index) => { 110 | let singleFile: string; 111 | 112 | const componentName = upperFirst(config.trim_icon_prefix) + upperFirst(camelCase(name)); 113 | const currentSvgComponents = new Set(); 114 | 115 | if (config.use_typescript) { 116 | currentSvgComponents.add('GProps'); 117 | } 118 | 119 | currentSvgComponents.add(styleType ? 'SvgCss' : 'SvgXml'); 120 | 121 | names.push(name); 122 | 123 | cases += `${whitespace(4)}case '${name}':\n`; 124 | 125 | imports.push(componentName); 126 | 127 | cases += `${whitespace(6)}return <${componentName} key="L${index + 1}" {...rest} />;\n`; 128 | 129 | singleFile = getTemplate('LocalSingleIcon' + jsxExtension); 130 | singleFile = replaceSize(singleFile, config.default_icon_size); 131 | singleFile = replaceSvgComponents(singleFile, currentSvgComponents); 132 | singleFile = replaceComponentName(singleFile, componentName); 133 | singleFile = replaceComponentXml(singleFile, `const xml = \`\n${svgStr}\n\``); 134 | singleFile = replaceSingleIconContent(singleFile, `\n${whitespace(4)}<${styleType ? 'SvgCss' : 'SvgXml'} xml={xml} width={size} height={size} {...rest} />\n`); 135 | 136 | fs.writeFileSync(path.join(saveDir, componentName + jsxExtension), singleFile); 137 | 138 | if (!config.use_typescript) { 139 | let typeDefinitionFile = getTemplate('SingleIcon.d.ts'); 140 | 141 | typeDefinitionFile = replaceComponentName(typeDefinitionFile, componentName); 142 | fs.writeFileSync(path.join(saveDir, componentName + '.d.ts'), typeDefinitionFile); 143 | } 144 | 145 | console.log(`${colors.green('√')} Generated local icon "${colors.yellow(name)}"`); 146 | }) 147 | 148 | let iconFile = getTemplate('Icon' + jsxExtension); 149 | 150 | iconFile = replaceSize(iconFile, config.default_icon_size); 151 | iconFile = replaceCases(iconFile, cases); 152 | iconFile = replaceSvgComponents(iconFile, svgComponents); 153 | iconFile = replaceImports(iconFile, imports); 154 | iconFile = replaceExports(iconFile, imports); 155 | 156 | if (config.use_typescript) { 157 | iconFile = replaceNames(iconFile, names); 158 | } else { 159 | iconFile = replaceNamesArray(iconFile, names); 160 | 161 | let typeDefinitionFile = getTemplate('Icon.d.ts'); 162 | 163 | typeDefinitionFile = replaceExports(typeDefinitionFile, imports); 164 | typeDefinitionFile = replaceNames(typeDefinitionFile, names); 165 | fs.writeFileSync(path.join(saveDir, 'index.d.ts'), typeDefinitionFile); 166 | } 167 | 168 | fs.writeFileSync(path.join(saveDir, 'index' + jsxExtension), iconFile); 169 | 170 | console.log(`\n${colors.green('√')} All icons have putted into dir: ${colors.green(config.save_dir)}\n`); 171 | } 172 | 173 | const generateCase = (data: XmlData['svg']['symbol'][number], baseIdent: number) => { 174 | let template = `\n${whitespace(baseIdent)}\n`; 175 | 176 | for (const domName of Object.keys(data)) { 177 | let realDomName = SVG_MAP[domName]; 178 | 179 | if (domName === '$') { 180 | continue; 181 | } 182 | 183 | if (!realDomName) { 184 | console.error(colors.red(`Unable to transform dom "${domName}"`)); 185 | process.exit(1); 186 | } 187 | 188 | const counter = { 189 | colorIndex: 0, 190 | baseIdent, 191 | }; 192 | 193 | if (data[domName].$) { 194 | template += `${whitespace(baseIdent + 2)}<${realDomName}${addAttribute(domName, data[domName], counter)}\n${whitespace(baseIdent + 2)}/>\n`; 195 | } else if (Array.isArray(data[domName])) { 196 | data[domName].forEach((sub) => { 197 | template += `${whitespace(baseIdent + 2)}<${realDomName}${addAttribute(domName, sub, counter)}\n${whitespace(baseIdent + 2)}/>\n`; 198 | }); 199 | } 200 | } 201 | 202 | template += `${whitespace(baseIdent)}\n`; 203 | 204 | return template; 205 | }; 206 | 207 | const addAttribute = (domName: string, sub: XmlData['svg']['symbol'][number]['path'][number], counter: { colorIndex: number, baseIdent: number }) => { 208 | let template = ''; 209 | 210 | if (sub && sub.$) { 211 | if (ATTRIBUTE_FILL_MAP.includes(domName)) { 212 | // Set default color same as in iconfont.cn 213 | // And create placeholder to inject color by user's behavior 214 | sub.$.fill = sub.$.fill || '#333333'; 215 | } 216 | 217 | for (const attributeName of Object.keys(sub.$)) { 218 | if (attributeName === 'fill') { 219 | template += `\n${whitespace(counter.baseIdent + 4)}${attributeName}={getIconColor(color, ${counter.colorIndex}, '${sub.$[attributeName]}')}`; 220 | counter.colorIndex += 1; 221 | } else { 222 | template += `\n${whitespace(counter.baseIdent + 4)}${camelCase(attributeName)}="${sub.$[attributeName]}"`; 223 | } 224 | } 225 | } 226 | 227 | return template; 228 | }; 229 | -------------------------------------------------------------------------------- /src/libs/getConfig.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import fs from 'fs'; 3 | import colors from 'colors'; 4 | import defaultConfig from './iconfont.json'; 5 | 6 | export interface Config { 7 | symbol_url?: string; 8 | use_typescript: boolean; 9 | save_dir: string; 10 | trim_icon_prefix: string; 11 | default_icon_size: number; 12 | local_svgs?: string 13 | } 14 | 15 | let cacheConfig: Config; 16 | 17 | export const getConfig = () => { 18 | if (cacheConfig) { 19 | return cacheConfig; 20 | } 21 | 22 | const targetFile = path.resolve('iconfont.json'); 23 | 24 | if (!fs.existsSync(targetFile)) { 25 | console.warn(colors.red('File "iconfont.json" doesn\'t exist, did you forget to generate it?')); 26 | process.exit(1); 27 | } 28 | 29 | const config = require(targetFile) as Config; 30 | 31 | if ( 32 | !config.local_svgs && 33 | (!config.symbol_url || !/^(?:https?:)?\/\//.test(config.symbol_url)) 34 | ) { 35 | console.warn(colors.red('You are required to provide symbol_url or local_svgs')); 36 | process.exit(1); 37 | } 38 | 39 | if (config.symbol_url && config.symbol_url.indexOf('//') === 0) { 40 | config.symbol_url = 'http:' + config.symbol_url; 41 | } 42 | 43 | config.save_dir = config.save_dir || defaultConfig.save_dir; 44 | config.default_icon_size = config.default_icon_size || defaultConfig.default_icon_size; 45 | 46 | cacheConfig = config; 47 | 48 | return config; 49 | }; 50 | -------------------------------------------------------------------------------- /src/libs/getTemplate.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import path from 'path'; 3 | 4 | export const getTemplate = (fileName: string) => { 5 | return fs.readFileSync(path.join(__dirname, `../templates/${fileName}.template`)).toString(); 6 | }; 7 | -------------------------------------------------------------------------------- /src/libs/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "symbol_url": "请参考README.md，复制官网提供的JS链接。如果提供了local_svgs，则url选填", 3 | "use_typescript": false, 4 | "save_dir": "./src/iconfont", 5 | "trim_icon_prefix": "icon", 6 | "default_icon_size": 18, 7 | "local_svgs": "" 8 | } 9 | -------------------------------------------------------------------------------- /src/libs/parseLocalSvg.ts: -------------------------------------------------------------------------------- 1 | import glob from 'glob' 2 | import path from 'path' 3 | import { Config } from '../libs/getConfig' 4 | import * as fs from 'fs' 5 | 6 | export interface ILocalSvg { 7 | svgStr: string 8 | name: string 9 | styleType: boolean 10 | } 11 | 12 | const parseLocalSvg = ({ local_svgs }: Config) => { 13 | if (!local_svgs) { 14 | return [] 15 | } 16 | 17 | const localDir = path.resolve(local_svgs) 18 | 19 | const localSvg = glob.sync(path.join(localDir, '**/*.svg')) 20 | 21 | return localSvg.reduce((previousValue, currentValue) => { 22 | 23 | let svgStr = fs.readFileSync(currentValue, 'utf-8') 24 | 25 | /** 26 | * 去除注释,title,desc等不需要的标签 27 | */ 28 | svgStr = svgStr.substring(svgStr.indexOf('') + 6) 29 | .replace(//g, '').replace(/(.*?)<\/title>/g, '').replace(/(.*?)<\/desc>/g, '') 30 | 31 | const styleType = !!~svgStr.indexOf('') 32 | 33 | previousValue.push({ svgStr, name: path.basename(currentValue, '.svg'), styleType }) 34 | 35 | return previousValue 36 | }, []) 37 | } 38 | 39 | export default parseLocalSvg 40 | -------------------------------------------------------------------------------- /src/libs/replace.ts: -------------------------------------------------------------------------------- 1 | export const replaceSize = (content: string, size: number) => { 2 | return content.replace(/#size#/g, String(size)); 3 | }; 4 | 5 | export const replaceCases = (content: string, cases: string) => { 6 | return content.replace(/#cases#/g, cases); 7 | }; 8 | 9 | export const replaceSvgComponents = (content: string, components: Set) => { 10 | const used = Array.from(components); 11 | 12 | return content.replace( 13 | /#svgComponents#/g, 14 | used.length 15 | ? `import { ${used.join(', ')} } from 'react-native-svg';` 16 | : '' 17 | ); 18 | }; 19 | 20 | export const replaceNames = (content: string, names: string[]) => { 21 | return content.replace(/#names#/g, names.join(`' | '`)); 22 | }; 23 | 24 | export const replaceNamesArray = (content: string, names: string[]) => { 25 | return content.replace( 26 | /#namesArray#/g, 27 | JSON.stringify(names) 28 | .replace(/"/g, '\'') 29 | .replace(/','/g, '\', \'') 30 | ); 31 | }; 32 | 33 | export const replaceComponentName = (content: string, name: string) => { 34 | return content.replace(/#componentName#/g, name); 35 | }; 36 | 37 | export const replaceSingleIconContent = (content: string, render: string) => { 38 | return content.replace(/#iconContent#/g, render); 39 | }; 40 | 41 | export const replaceImports = (content: string, imports: string[]) => { 42 | return content.replace(/#imports#/g, imports.map((item) => `import ${item} from './${item}';`).join('\n')); 43 | }; 44 | 45 | export const replaceExports = (content: string, exports: string[]) => { 46 | return content.replace(/#exports#/g, exports.map((item) => `export { default as ${item} } from './${item}';`).join('\n')); 47 | }; 48 | 49 | 50 | export const replaceHelper = (content: string) => { 51 | return content.replace( 52 | /#helper#/g, 53 | 'import { getIconColor } from \'./helper\';' 54 | ); 55 | }; 56 | 57 | export const replaceNoColor = (content: string) => { 58 | return content.replace(/#colorFunc#/g, ''); 59 | }; 60 | 61 | export const replaceSummaryIcon = (content: string, iconName: string) => { 62 | return content.replace(/#SummaryIcon#/g, iconName); 63 | }; 64 | 65 | export const replaceComponentXml = (content: string, svgStr: string) => { 66 | return content.replace(/#xml#/g, svgStr); 67 | } 68 | -------------------------------------------------------------------------------- /src/libs/whitespace.ts: -------------------------------------------------------------------------------- 1 | export const whitespace = (repeat: number) => { 2 | return ' '.repeat(repeat); 3 | }; 4 | -------------------------------------------------------------------------------- /src/templates/Icon.d.ts.template: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | #exports# 9 | 10 | interface Props extends GProps, ViewProps { 11 | name: '#names#'; 12 | size?: number; 13 | color?: string | string[]; 14 | } 15 | 16 | declare const IconFont: FunctionComponent; 17 | 18 | export default IconFont; 19 | -------------------------------------------------------------------------------- /src/templates/Icon.js.template: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | #svgComponents# 5 | #imports# 6 | #exports# 7 | 8 | let IconFont = ({ name, ...rest }) => { 9 | switch (name) { 10 | #cases# } 11 | 12 | return null; 13 | }; 14 | 15 | IconFont = React.memo ? React.memo(IconFont) : IconFont; 16 | 17 | export default IconFont; 18 | -------------------------------------------------------------------------------- /src/templates/Icon.tsx.template: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | #svgComponents# 7 | #imports# 8 | #exports# 9 | 10 | export type IconNames = '#names#'; 11 | 12 | interface Props extends GProps, ViewProps { 13 | name: IconNames; 14 | size?: number; 15 | color?: string | string[]; 16 | } 17 | 18 | let IconFont: FunctionComponent = ({ name, ...rest }) => { 19 | switch (name) { 20 | #cases# } 21 | 22 | return null; 23 | }; 24 | 25 | IconFont = React.memo ? React.memo(IconFont) : IconFont; 26 | 27 | export default IconFont; 28 | -------------------------------------------------------------------------------- /src/templates/LocalSingleIcon.js.template: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | #svgComponents# 5 | 6 | #xml# 7 | 8 | let #componentName# = ({ size, color, ...rest }) => { 9 | return (#iconContent# ); 10 | }; 11 | 12 | #componentName#.defaultProps = { 13 | size: #size#, 14 | }; 15 | 16 | #componentName# = React.memo ? React.memo(#componentName#) : #componentName#; 17 | 18 | export default #componentName#; 19 | -------------------------------------------------------------------------------- /src/templates/LocalSingleIcon.tsx.template: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | #svgComponents# 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | #xml# 14 | 15 | let #componentName#: FunctionComponent = ({ size, color, ...rest }) => { 16 | return (#iconContent# ); 17 | }; 18 | 19 | #componentName#.defaultProps = { 20 | size: #size#, 21 | }; 22 | 23 | #componentName# = React.memo ? React.memo(#componentName#) : #componentName#; 24 | 25 | export default #componentName#; 26 | -------------------------------------------------------------------------------- /src/templates/SingleIcon.d.ts.template: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { FunctionComponent } from 'react'; 4 | // Don't forget to install package: @types/react-native 5 | import { ViewProps } from 'react-native'; 6 | import { GProps } from 'react-native-svg'; 7 | 8 | interface Props extends GProps, ViewProps { 9 | size?: number; 10 | color?: string | string[]; 11 | } 12 | 13 | declare const #componentName#: FunctionComponent; 14 | 15 | export default #componentName#; 16 | -------------------------------------------------------------------------------- /src/templates/SingleIcon.js.template: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | #svgComponents# 5 | #helper# 6 | 7 | let #componentName# = ({ size, color, ...rest }) => { 8 | return (#iconContent# ); 9 | }; 10 | 11 | #componentName#.defaultProps = { 12 | size: #size#, 13 | }; 14 | 15 | #componentName# = React.memo ? React.memo(#componentName#) : #componentName#; 16 | 17 | export default #componentName#; 18 | -------------------------------------------------------------------------------- /src/templates/SingleIcon.tsx.template: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | import React, { FunctionComponent } from 'react'; 5 | import { ViewProps } from 'react-native'; 6 | #svgComponents# 7 | #helper# 8 | 9 | interface Props extends GProps, ViewProps { 10 | size?: number; 11 | color?: string | string[]; 12 | } 13 | 14 | let #componentName#: FunctionComponent = ({ size, color, ...rest }) => { 15 | return (#iconContent# ); 16 | }; 17 | 18 | #componentName#.defaultProps = { 19 | size: #size#, 20 | }; 21 | 22 | #componentName# = React.memo ? React.memo(#componentName#) : #componentName#; 23 | 24 | export default #componentName#; 25 | -------------------------------------------------------------------------------- /src/templates/helper.d.ts.template: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | export declare const getIconColor: (color: string | string[] | undefined, index: number, defaultColor: string) => string; 4 | -------------------------------------------------------------------------------- /src/templates/helper.js.template: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | /** 4 | * @param {string | string[] | undefined} color 5 | * @param {number} index 6 | * @param {string} defaultColor 7 | * @return {string} 8 | */ 9 | export const getIconColor = (color, index, defaultColor) => { 10 | return color 11 | ? ( 12 | typeof color === 'string' 13 | ? color 14 | : color[index] || defaultColor 15 | ) 16 | : defaultColor; 17 | }; 18 | -------------------------------------------------------------------------------- /src/templates/helper.ts.template: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | 4 | export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => { 5 | return color 6 | ? ( 7 | typeof color === 'string' 8 | ? color 9 | : color[index] || defaultColor 10 | ) 11 | : defaultColor; 12 | }; 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "allowJs": false, 6 | "lib": ["ESNext"], 7 | "declaration": true, 8 | "removeComments": false, 9 | "outDir": "./build", 10 | "rootDir": "./", 11 | "jsx": "react", 12 | "importHelpers": true, 13 | "downlevelIteration": true, 14 | "strict": true, 15 | "noImplicitAny": false, 16 | "strictNullChecks": true, 17 | "strictFunctionTypes": true, 18 | "strictBindCallApply": true, 19 | "strictPropertyInitialization": true, 20 | "noImplicitThis": true, 21 | "alwaysStrict": true, 22 | 23 | "noUnusedLocals": true, 24 | "noUnusedParameters": true, 25 | "noImplicitReturns": true, 26 | "noFallthroughCasesInSwitch": true, 27 | "moduleResolution": "node", 28 | "allowSyntheticDefaultImports": true, 29 | "esModuleInterop": true, 30 | "resolveJsonModule": true 31 | } 32 | } 33 | --------------------------------------------------------------------------------