vue中iconfont Symbol 引用

最近项目中使用到多色图标，可以前的经验都仅仅是在h5页面中直接引用iconfont。此次需要在vue项目下引用多色图标，在csdn下看到一位作者的方法，经过实践并加入自己的理解写下此博客
[参考博客]: https://blog.csdn.net/qq_42268364/article/details/102484074

iconfont 使用

可在网上直接搜索iconfont的使用方式，大概流程是
1.iconfont官网 注册/登录
2.查找需要的图标，添加入库
3.添加到项目
4.进入项目修改相关配置
5.下载图标

项目中使用

vue中引入 js

// main.js中引入iconfont图标
import "./assets/css/iconfont/iconfont.js";

新建svg图标组件

• 新建iconfont.vue
• 调节图标大小改变font-size属性即可，此组件中改变size数值即可

<template>
  <svg
    class="iconfont-js"
    :style="{ 'font-size': size+'px' }"
    aria-hidden="true"
  >
    <use :xlink:href="iconClass"></use>
  </svg>
</template>

<script>
export default {
  name: "iconfontSvg",
  props: {
    //图标的名称
    icon: {
      type: String,
      required: true,
    },
    //图标的font-size，单位是px
    size: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconClass() {
      return `#${this.icon}`
    }
  }
};
</script>

<style>
.iconfont-js {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

引入全局组件

• 将iconfont-svg引入

import iconfontSvg from "./assets/css/iconfont/iconfont.vue";
Vue.component("iconfont-svg",iconfontSvg)

页面中使用组件

<iconfont-svg icon="icon-msg" size="38"></iconfont-svg>