@sunzi/icon NPM

一个帮助你从 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