vue3.0 + element Plus项目中引入iconfont

一. 选择 Icon，修改好样式复制代码

大家可以根据自己的需要在 iconfont 中找到自己想要引用的 Icon，点击下载便会出现如下界面，调整后自己想要的大小及颜色，然后点击复制SVG代码；

 二. 创建文件

1. 可以在vue项目中为要引入的 Icon 单独创建一个文件夹（icons），里面是项目中使用到的 Icon

 2. 在 icons 文件夹下面新建IconNoData.vue文件，里面的内容为刚才复制的SVG代码

<!--注意：在粘贴刚才复制的svg代码时一定要在外层包裹一个template标签-->
<template>
  <svg
    t="1665802876900"
    class="icon"
    viewBox="0 0 1567 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="2042"
    width="200"
    height="200"
  >
 <!--这个path很长，就不全部显示了 你们就将刚才复制的svg呆滞直接粘贴就好-->
    <path
      d="M156.662278 699.758173h21.097186A10.444152 10.444152 0 0 1 187.994733 
      p-id="2043"
    ></path>
  </svg>
</template>

三.页面引用

在创建好文件之后，接下来就是引用啦！！需要在哪个文件使用就像我如下使用就好：

<template>
  <div class="no-data-mod">
    <div class="icon">
      <!--这里直接使用element中的icon引入，IconNoData是你在js文件中引入的-->
      <el-icon :size="56"><IconNoData /></el-icon>
    </div>
    <div class="tip">未找到数据</div>
  </div>
</template>

注意：一定要记得引入刚才创建的IconNoData.vue文件，路径不要出错哦！

<script lang="ts" setup>
import IconNoData from "@/components/icons/IconNoData.vue";
</script>

.no-data-mod {
  display: flex;
  align-items: center;
  justify-content: center;
  .tip {
    font-size: 14px;
    color: rgb(142, 146, 146);
  }
}

 四. 实现效果