├── example ├── package.json ├── pages │ ├── index.css │ └── index.tsx ├── tsconfig.json ├── global.d.ts └── .umirc.ts ├── .fatherrc.ts ├── .prettierrc ├── .gitignore ├── tsconfig.json ├── README.md ├── package.json ├── LICENSE └── src ├── app.ts.tpl └── index.ts /example/package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/pages/index.css: -------------------------------------------------------------------------------- 1 | .normal { 2 | background: #79f2aa; 3 | } 4 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /example/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css'; 2 | declare module '*.less'; 3 | -------------------------------------------------------------------------------- /.fatherrc.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | cjs: 'babel', 4 | }, 5 | ]; 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": true, 4 | "singleQuote": true, 5 | "tabWidth": 2, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /yarn.lock 3 | /package-lock.json 4 | /example/dist 5 | /example/node_modules 6 | /example/pages/.umi 7 | /example/pages/.umi-production 8 | /lib 9 | *.log -------------------------------------------------------------------------------- /example/.umirc.ts: -------------------------------------------------------------------------------- 1 | import { join } from 'path'; 2 | import { IConfig } from 'umi-types'; 3 | 4 | export default { 5 | routes: [{ path: '/', icon: 'question', component: './index' }], 6 | plugins: [join(__dirname, '..', require('../package').main || 'index.js')], 7 | } as IConfig; 8 | -------------------------------------------------------------------------------- /example/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './index.css'; 3 | 4 | export default function(props) { 5 | console.log(props); 6 | return ( 7 |
8 |

Page index

9 | {props.route.icon} 10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "esnext", 5 | "lib": ["esnext", "dom"], 6 | "sourceMap": true, 7 | "baseUrl": ".", 8 | "jsx": "react", 9 | "allowSyntheticDefaultImports": true, 10 | "moduleResolution": "node", 11 | "forceConsistentCasingInFileNames": true, 12 | "noImplicitReturns": true, 13 | "suppressImplicitAnyIndexErrors": true, 14 | "noUnusedLocals": true, 15 | "experimentalDecorators": true, 16 | "declaration": false, 17 | "skipLibCheck": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # umi-plugin-antd-icon-config 2 | 3 | [![NPM version](https://img.shields.io/npm/v/umi-plugin-antd-icon-config.svg?style=flat)](https://npmjs.org/package/umi-plugin-antd-icon-config) 4 | [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-antd-icon-config.svg?style=flat)](https://npmjs.org/package/umi-plugin-antd-icon-config) 5 | 6 | Convert icon string to antd@4 7 | 8 | 由于 pro-layout 支持在 config 中 `icon:string` 的配置，但是在 4.0 中不推荐这样的用法。这个插件可以将其转化，不再引入全量的 icon。 9 | 10 | ## Install 11 | 12 | ```bash 13 | # or yarn 14 | $ npm install 15 | ``` 16 | 17 | ```bash 18 | $ npm run build --watch 19 | $ npm run start 20 | ``` 21 | 22 | ## Usage 23 | 24 | Configure in `.umirc.js`, 25 | 26 | ```js 27 | export default { 28 | plugins: [['umi-plugin-antd-icon-config', {}]], 29 | }; 30 | ``` 31 | 32 | ## Options 33 | 34 | TODO 35 | 36 | ## LICENSE 37 | 38 | MIT 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "umi-plugin-antd-icon-config", 3 | "version": "3.0.1", 4 | "description": "Convert icon string to antd@4", 5 | "repository": "https://github.com/umijs/umi-plugin-antd-icon-config", 6 | "license": "MIT", 7 | "main": "lib/index.js", 8 | "files": [ 9 | "lib", 10 | "src", 11 | "ui" 12 | ], 13 | "scripts": { 14 | "build": "father-build", 15 | "prepublishOnly": "npm run build && np --no-cleanup --yolo --no-publish", 16 | "start": "cross-env APP_ROOT=$PWD/example umi dev" 17 | }, 18 | "dependencies": { 19 | "@ant-design/icons": "^4.0.0" 20 | }, 21 | "devDependencies": { 22 | "cross-env": "^6.0.3", 23 | "father-build": "^1.8.0", 24 | "np": "^5.0.3", 25 | "umi": "^4.0.0" 26 | }, 27 | "peerDependencies": { 28 | "umi": "4.x" 29 | }, 30 | "authors": { 31 | "name": "chenshuai2144", 32 | "email": "qixian.cs@outlook.com" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-present chenshuai2144 (qixian.cs@outlook.com) 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/app.ts.tpl: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import allIcons from '@@/plugin-antd-icon/icons'; 3 | 4 | export interface MenuDataItem { 5 | children?: MenuDataItem[]; 6 | routes?: MenuDataItem[]; 7 | hideChildrenInMenu?: boolean; 8 | hideInMenu?: boolean; 9 | icon?: string; 10 | locale?: string; 11 | name?: string; 12 | key?: string; 13 | path?: string; 14 | [key: string]: any; 15 | } 16 | function toHump(name: string) { 17 | return name.replace(/\-(\w)/g, function (all, letter) { 18 | return letter.toUpperCase(); 19 | }); 20 | } 21 | 22 | function formatter(data: MenuDataItem[]): MenuDataItem[] { 23 | if (!Array.isArray(data)) { 24 | return data; 25 | } 26 | (data || []).forEach((item = { path: '/' }) => { 27 | if (item.icon) { 28 | const { icon } = item; 29 | const v4IconName = toHump(icon.replace(icon[0], icon[0].toUpperCase())); 30 | const NewIcon = allIcons[icon] || allIcons[`${v4IconName}Outlined`]; 31 | if (NewIcon) { 32 | try { 33 | item.icon = React.createElement(NewIcon); 34 | } catch (error) { 35 | console.log(error); 36 | } 37 | } 38 | } 39 | if (item.children || item.routes) { 40 | const children = formatter(item.children || item.routes); 41 | // Reduce memory usage 42 | item.children = children; 43 | } 44 | }); 45 | return data; 46 | } 47 | 48 | export function patchClientRoutes(props) { 49 | formatter(props.routes); 50 | } 51 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { IApi } from 'umi'; 2 | import * as allIcons from '@ant-design/icons'; 3 | import { join } from 'path'; 4 | import { readFileSync } from 'fs'; 5 | 6 | export interface MenuDataItem { 7 | children?: MenuDataItem[]; 8 | routes?: MenuDataItem[]; 9 | hideChildrenInMenu?: boolean; 10 | hideInMenu?: boolean; 11 | icon?: string; 12 | locale?: string; 13 | name?: string; 14 | key?: string; 15 | path?: string; 16 | [key: string]: any; 17 | } 18 | 19 | function toHump(name: string) { 20 | return name.replace(/\-(\w)/g, function (all, letter) { 21 | return letter.toUpperCase(); 22 | }); 23 | } 24 | 25 | function formatter(data: MenuDataItem[]): MenuDataItem[] { 26 | if (!Array.isArray(data)) { 27 | return []; 28 | } 29 | let icons = []; 30 | (data || []).forEach((item = { path: '/' }) => { 31 | if (item.icon) { 32 | const { icon } = item; 33 | const v4IconName = toHump(icon.replace(icon[0], icon[0].toUpperCase())); 34 | if (allIcons[icon]) { 35 | icons.push(icon); 36 | } 37 | if (allIcons[`${v4IconName}Outlined`]) { 38 | icons.push(`${v4IconName}Outlined`); 39 | } 40 | } 41 | if (item.routes || item.children) { 42 | icons = icons.concat(formatter(item.routes || item.children)); 43 | } 44 | }); 45 | 46 | return Array.from(new Set(icons)); 47 | } 48 | 49 | export default function (api: IApi) { 50 | api.describe({ 51 | key: 'antd-icon-config', 52 | }); 53 | api.onGenerateFiles(() => { 54 | const { userConfig } = api; 55 | const icons = formatter(userConfig.routes); 56 | let iconsString = icons.map( 57 | (iconName) => `import ${iconName} from '@ant-design/icons/${iconName}'`, 58 | ); 59 | api.writeTmpFile({ 60 | path: '../plugin-antd-icon/icons.ts', 61 | content: ` 62 | ${iconsString.join(';\n')} 63 | 64 | export default { 65 | ${icons.join(',\n')} 66 | } 67 | `, 68 | }); 69 | 70 | api.writeTmpFile({ 71 | path: '../plugin-antd-icon-config/app.ts', 72 | content: readFileSync(join(__dirname, './app.ts.tpl'), 'utf-8'), 73 | }); 74 | }); 75 | api.addRuntimePlugin(() => ['@@/plugin-antd-icon-config/app.ts']); 76 | } 77 | --------------------------------------------------------------------------------