iconfont 使用

在iconfont网站建好自己的项目,配置好前缀
把生成的链接引入index.html

然后写一个Econ.vue文件,

<template>
  <i
    class="iconfont"
    :class="`${prefix}-${name}`"
    :style="{ color: color, fontSize: size }"
  ></i>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      require: true,
    },
    color: {
      type: String,
    },
    size: {
      type: String,
      default: "20px",
    },
    prefix: {
      type: String,
      default: "icon",
    },
  },
};
</script>

然后就可以使用 <icon name='图标名称' ></icon>来调用了

演示如下

<econ name='python' size='25px' />