将 SVG 图标 包装为 Vue 组件来使用

设计师为我们单独提供了设计稿中的图标，为了方便使用，我们在这里把它制作为字体图标。制作字体图标的工具有很多，在这里我们推荐大家使用：https://www.iconfont.cn/。

一、注册账户

二、创建项目 

 

三、上传图标到项目

可以在首页中挑选符合项目的图标加入购物车，或者是ui已经设计好的svg，导入项目：

 

四、生成链接

 

五、配置到项目中使用

在styles文件下创建icon.less,把复制过来的代码粘贴过来

@font-face {
  font-family: "toutiao"; /* Project id 3852472 */
  src: url('//at.alicdn.com/t/c/font_3852472_bvqgbaxp2el.svg?t=1672913556576#toutiao') format('svg');
}

.toutiao {
  font-family: "toutiao" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.toutiao-Icon_arrow-down:before {
  content: "\e602";
}

.toutiao-a-Icon_arrow-right:before {
  content: "\e603";
}

.toutiao-Icon_eyes:before {
  content: "\e604";
}

.toutiao-Icon_profile:before {
  content: "\e605";
}

.toutiao-a-Icon_fullscreen:before {
  content: "\e606";
}

 在index.less（全局样式）中导入，注意全局样式必须引入main.js才会生效

@import "./icon.less";//less文件导入后面加相对路径!!

//main.js
// 导入全局样式
import '@/styles/index.less'

使用：在标签上加上class=toutiao toutiao-xxx"，即可使用对应的图标，eg：

  <i slot="icon" class="toutiao toutiao-Icon_arrow-down"></i>