一. 选择 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);
}
}