css 图标应用 ​

使用 iconpack 作为图标管理。

内联 svg 替代字体图标 ​

参考：学习了，CSS中内联SVG图片有比Base64更好的形式

总结如下：

1. 首要考虑：小程序对字体图标的支持并不完美，而且无法更好实现渐变
2. 内链 svg ：矢量图形、支持渐变，体积更小
3. 嵌入 css 中无需请求，渲染几乎无延时

如何上传到 iconpack ​

官网：iconpack

图片设计规范 ​

与 iconfont 类似，但 iconpack 兼容性更高。

1. 需要去除圆角属性，进行曲线化即可；
2. 去除阴影属性，页面设计需要可使用 css 属性去添加；（尤其是 figma 阴影或其他效果均不支持）

上传后图片命名 ​

1. 尽量使用英语
2. 分组或模块之间使用-作为区分，方便在开发中使用。如:home-report

工具生成 css 内联 svg ​

工具：iconfont-tools

由于 iconfont-tools 的工具只支持阿里的 iconfont ，经过小修改即可支持 iconpack ，目前已提交了 commit ，等待作者合并代码即可。

使用方式 ​

1. 复制 url

2. 使用工具

# 使用 npx 工具
npx https://github.com/Aziz-pang/iconfont-tools.git --from <url>