项目icon图标库在线生成、实时添加(svg转icon)

关于icon,svg的痛点：

1. 项目前端开发过程中，设计不可能一次性把所有的icon都给到，每次来一张新的图片，就要加进assets文件夹里

2. 需求隔三差五更新迭代，设计稿一改再改，icon变来变去，....

3. 对于svg图片，引入用img标签，没办法简单方便的根据交互变化(如鼠标悬停、按钮点击、超链接激活状态hover， click， active)改变颜色、大小等css样式

中原土法加svg/icon直通车：

• svg文件用在html里的使用方式：

颜色大小小想变就变？ -- 呵呵哒....

请开始你的表演

用了咱的方法，上项目效果图，杠杠的！：

---

按照下面的步骤走，项目一次性导入多个icon，一键生成自己的icon图标库，支持增删改icon

1. 这是设计师给的一堆svg图表(✅❌️️⏸️✔️⚠️☎️...)

&@##$$%%^^.....

设计给的svg

2. 点击进入icomoon传送带

1. 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

@import 'variables';

.icon-help {
  &::before {
    font-size: 64px;
  }
  &:hover {
    &::before {
      color: #E98B23;
      transition: color 1s ease;
    }
  }
}

GIF：