@sunzi/icon

一个帮助你从 Figma 中拉去 icon 文件本地, 并生成 React 组件的工具

---

$3

``
generate-icon --file=uzP7XhOZK6tN47Mmd3YQbM --folder=src/test --prefixCls=test --gitDiff=false
Options
--file, -f 来自 Figma 的文件密钥
--prefixCls, -c 给 icon 添加前缀 , 最终类名为 -icon
--folder -fo 存放资源目录
--gitDiff -d 是否增加git diff输出 (默认true)(在调试阶段可以配置，生产阶段建议不要配置)
--help 帮助
`

$3

如果你有一个新的图标库需要生成，需要在 packages/icons/package.json 配置一个生成图标命令;
具体更新图标库，就跑对应的命令，例如：pnpm -r --filter=@sunzi/icon run generate-icon:test 生成 test 图标库的命令
生成完成之后，发布

$3

图标没有设置任何的样式，需要一个同一的全局配置
样式名称是：prefixCls(变量)+icons
例如 prefixCls=test

`
.test-icon {
display: inline-block;
font-style: normal;
width: 1em;
height: 1em;
}
`

具体样式，项目设置

$3

颜色：颜色采用的是 fill="currentColor"或者 stroke="currentColor", 只需要改变 css 中的 color 就行了注意, 这样只能适用于统一颜色，无法达到彩色;
大小：svg 没用设置大小，需要全局默认设置 svg 的样式，建议 width:1em;height:1em，采用 em 为单位，这样 svg 的大小就跟 font-szie 的大小一致只需要改变 font-szie，就能改变 svg 的大小

`
// text-green-7 和 text-24 使用采用tailwind颜色配置
// 相当于
.text-green-7 {
color: #08D36A;
}
.text-24 {
font-size: 24px;
}

``

$3

填充方式要根据设计提供的 svg 有没有 stroke 或者 fill，改变填充，其他只能自己设置独立的 css 改变；
目前不支持彩色图标，生成的时候，会把fill或者stroke替换成currentColor