@sunzi/icon
v1.1.42
Published
React Icon Set
Downloads
533
Readme
一个帮助你从 Figma 中拉去 icon 文件本地, 并生成 React 组件的工具
生成图标命令
generate-icon --file=uzP7XhOZK6tN47Mmd3YQbM --folder=src/test --prefixCls=test --gitDiff=false
Options
--file, -f 来自 Figma 的文件密钥
--prefixCls, -c 给 icon 添加前缀 , 最终类名为 <your-prefixCls>-icon
--folder -fo 存放资源目录
--gitDiff -d 是否增加git diff输出 (默认true)(在调试阶段可以配置,生产阶段建议不要配置)
--help 帮助
配置命令
如果你有一个新的图标库需要生成,需要在 packages/icons/package.json
配置一个生成图标命令;
具体更新图标库,就跑对应的命令,例如:pnpm -r --filter=@sunzi/icon run generate-icon:test
生成 test 图标库的命令
生成完成之后,发布
全局样式
图标没有设置任何的样式,需要一个同一的全局配置 样式名称是:prefixCls(变量)+icons 例如 prefixCls=test
.test-icon {
display: inline-block;
font-style: normal;
width: 1em;
height: 1em;
}
具体样式,项目设置
颜色和大小
颜色:颜色采用的是 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;
}
<IconMore className="text-green-7 text-24" />
其他
填充方式要根据设计提供的 svg 有没有 stroke 或者 fill,改变填充,其他只能自己设置独立的 css 改变; 目前不支持彩色图标,生成的时候,会把fill或者stroke替换成currentColor