0.0.10 • Published 7 months ago
create-iconfont-component v0.0.10
create-iconfont-component
本项目是根据 Iconfont 上的图标在项目中生成 React 或者 Vue 组件，方便大家使用。
使用方式一(推荐)
- 在项目根目录新增
iconfont.json文件
[
{
"projectName": "project",
"iconfontId": 0,
"projectType": "react",
"projectLanguage": "Typescript",
"svgClass": "demo"
}
]
iconfont.json类型为Array<Object>Object 详情
| 参数名称 | 类型 | 示例 |
|---|---|---|
| projectName | string | "demo"项目名称,支持 a-zA-Z 命名 |
| iconfontId | number | 123iconfont 项目 id 1. 登录 iconfont 官网 2. 点击 资源管理 —— 我的项目 3. 获取浏览器url中的 projectId |
| projectType | string | "react"项目使用框架，支持 react 或者 vue |
| componentPath | string | "./src/components"iconfont 生成位置，最终位置由 componentPath + projectName |
| projectLanguage | string | "Typescript"项目使用语言，支持 Typescript 或者 JavaScript |
- 安装
create-iconfont-component
npm install -D create-iconfont-component- 在项目
package.json中新增
"scripts": {
...
"iconfont": "create-iconfont-component"
},- 项目终端执行
npm run iconfont使用方式二
- 项目终端执行以下命令
npx create-iconfont-component- 按照提示填写信息
✔ 请输入项目名称 projecta
✔ 请输入Iconfont项目Id 0
✔ 请选择项目应用框架 React
✔ 项目开发语言 Typescript
✔ 请输入组件生成位置 ./dist
✔ 请输入svg className前缀
✔ 是否生成预览文件 是FAQ
- 如何获取iconfontId
1. 登录 [iconfont](https://www.iconfont.cn) 官网
2. 点击 资源管理 —— 我的项目
3. 获取浏览器url中的 
- 如何修改组件名称
本插件生成组件名称： Icon + (iconfont项目中的icon的class名称，`-` `_` 设置去掉成为大驼峰命名)
1. 登录 [iconfont](https://www.iconfont.cn) 官网
2. 点击 资源管理 —— 我的项目
3. 鼠标放在 icon 上，点击 编辑icon
4. 修改 `Font Class / Symbol` 输入框文本
5. 点击 `仅保存`
- 如何修改组件
svg标签的样式
1. 项目配置文件可设置 svg 的class名称
2. 项目入口配置 该class的style