svgicon-cli

|命令|参数说明|默认值|示例| |---|-------|----|-----| |-V|查看版本号|-|svgicon -V| |-i --init [path]|初始化，path为初始化文件存放目录|./src/icon|svgicon -i svgicon -i ./src/iconTest| |-a --add [iconName] [icons...]|添加指定名称的icon，多个icon请以空格分开；指定 . 则全部添加|-|svgicon -a .svgicon -a ic_files ic_delete| |--set-origin [key=value] [key=value...]|设置或添加icon的资源路径|{"ide": ide资源地址}| svgicon --set-origin test=https://at.alicdn.com/t/test.jssvgicon --set-origin test1=https://at.alicdn.com/t/test1.js test2=https://at.alicdn.com/t/test2.js |--del-origin [key] [key...]|删除icon资源地址|-|svgicon --del-origin testOriginsvgicon --del-origin testOrigin1 testOrigin2 |--show-origin|查看icon资源地址|-|svgicon --show-origin

init

执行init之后，会在指定的目录下创建icon文件夹，包含如下文件： |文件名|说明| |-----|---| |config.json|icon的配置文件| |index.less|icon组件的样式文件| |index.tsx|icon组件文件| |path.tsx|path路径集合文件| |preview.html|预览已添加的icon (暂只有通过add命令添加后才会实时更新)；

config.json 文件：

{
 "origin": {
  "ide": "https://at.alicdn.com/t/c/font_3325623_wwvul9sxt1.js"
 },
 "map": {},
 "include": [],
 "exclude": []
}

1. origin 为icon的资源路径集合；
2. map 暂无作用；
3. include 需要包含的icon名称数组，全量添加的时候使用；
4. exclude 需要剔除的icon名称数组，全量添加的时候使用；

path.tsx 文件：

import React from 'react';

export default {
 "ic_files": <path d="M96 128l317.184 0.128L500.224 256H928v640h-832V128zM832 352H192v448h640v-448z"  ></path>,
 ...
}

📢 注意：执行命令请在工程项目的根目录进行操作！init执行后会在工程的package.json中插入 "iconConfigPath": <path> 作为icon的路径的配置

set-origin

修改或者添加icon的源，重名时会在控制台提醒是否修改替换；否则直接添加；下一步中的add中会通过该配置读取指定资源；

add

• 添加icon到path.tsx文件，支持单个、批量、全量添加；
• 存在单个文件源时，直接读取文件进行添加；存在多个文件源时，则会提示用户进行选择；
• 添加时会判断现存的path，为增量添加，重名则跳过以及提示；
• 批量时请以空格分割要添加的icon名称；
• 全量添加时会将获取到的资源中的未在path.tsx中的icon全部加入；
• 触发add后，会同步更新preview.html文件；

⚔ 建议 ⚔

初始化时可以直接执行 svgicon -i -a [iconName] 快速初始化、设置资源路径、添加icon；

使用

TODO:

• icon删除；
• icon文件配置路径查找;
• icon命名空间
• preview手动刷新

历史记录

• 0.1.1 处理多symbol中的多path的问题；