在线使用 有时候会因网络问题影响用户体验;直接放在 本地使用 ,如果过多使用也会显得繁琐,所以就可以将其封装成一个组件,也方便维护。
封装基于阿里巴巴图标库的项目图标。
初次使用iconfont项目参考: 点我查看使用前的准备和三种引用方式介绍
准备
-
将项目内的图标下载至本地
-
在了路径
src/assets
下新建文件夹iconfont
,用来存放字体图标的本地文件 -
解压下载到本地的字体图标文件,放到 iconfont 文件夹下
-
如过项目中没有下载
css-loader
依赖包,就进行下载,否则会报错npm install css-loader -D
封装
unicode引用封装
<template>
<div>
<span class="iconfont" v-html="name"></span>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'iconUnicode',
props: {
name: {
type: String,
required: true
}
}
}
</script>
<style scoped>
@font-face {
/* Unicode */
font-family: "iconfont";
src: