Background：
when a icon is added in the UI/Design, developer usually download it and upload it to project. As time goes by, this will result in too many duplicate static resources.
Solution：
Split the icons into separate module and provide a preview page which can show all icons in this project. Copy icon name in the preview page and paste it where used.
Directory
packages
|__icon
|__script
|__preview-icons.js
|__src
|__index.tsx
|__style.scss
|__svgs
|__package.json
|__rollup.config.js
|__svgo.config.js
Preview
- get all files name by
glob - get all files content by
fs.readFileSync - generate svg spreact by
svgSpreact - create server and send html page by
http.createServer
Usage
<Icon name="copied-name"/>
Reference:
Rollup rollupjs.org/introductio…
npm: svgo www.npmjs.com/package/svg…
npm: svg-spreact www.npmjs.com/package/svg…
