关于icon,svg的痛点：
- 项目前端开发过程中，设计不可能一次性把所有的icon都给到，每次来一张新的图片，就要加进
assets文件夹里
- 需求隔三差五更新迭代，设计稿一改再改，icon变来变去，👇👇👇👇👇👇👇👇👇👇....
- 对于svg图片，引入用
img标签，没办法简单方便的根据交互变化(如鼠标悬停、按钮点击、超链接激活状态hover，click，active)改变颜色、大小等css样式
中原土法加svg/icon直通车🚌🚌🚌：
- svg文件用在html里
<img/>的使用方式：
<img src="../../../assets/images/question.svg" alt="">
颜色大小小想变就变？ -- 呵呵哒....
请开始你的表演
用了咱的方法，上项目效果图，杠杠的！：
按照下面的步骤走，项目一次性导入多个icon，一键生成自己的icon图标库，支持增删改icon
1. 这是设计师给的一堆svg图表(✅❌️️⏸️💬✔️🔙⚠️☎️...)
&@##$$%%^^.....
设计给的svg
2. 点击进入icomoon传送带
-
icomoon
其他icon生成网站：如iconfont，fontawesome等，同类型产品旗鼓相当，咱不展开讲了，以icomoon为例
3. 给自己的icon图标库起个名字呗
22222.png
4. 选中你要的svg们
注意️
-
选中状态为橙色边框
4. 编辑你的icon库，如初始颜色，class名(也可以用默认的)
- 点击右下方的Generate Font
注意️ - 下面红框里可以点击进行特定的icon编辑
5. 下载并文件放在自己的项目里
- 点击右下角的download
-
解压后的样子，并将这四个文件放在自己的项目的对应assets的fonts文件夹里
- 把文件里的
style.css的内容拷贝到自己项目对应的css文件，里面表识了font-face，icon的class以及css等信息
想一次性导入之前的svgs，然后添加/删除一些新的svg到自己的图标库
- 当前项目里点击左上角
Import Icons,导入之前download的文件里的selection.json文件
-
selection.json有之前已经保存的icon信息，导入之后自动识别为各个svg，然后再点击import icons在此基础上进行新的icon
代码：
注意⚠️
- 咱用的scss
<div>
<span class="icon-info"></span>
<i class="icon-help"></i>
</div>
@import 'variables';
.icon-help {
&::before {
font-size: 64px;
}
&:hover {
&::before {
color: #E98B23;
transition: color 1s ease;
}
}
}
GIF：
