1.iconfont中生成symbol文件
阿里图标库中选好加入购物车之后,选择Symbol,然后点击旁边的在线链接,生成下方链接,点进去,ctrl A全选复制,将这些存进新建的iconfont.js文件中。到这,图标的本地环境就准备好了。
注意:图标新增要更新js文件
2.vue中引入
main.js文件中,引入我们刚刚生成的iconfont.js文件
import './xx/iconfont.js'
3.简化引入
这一步是为了图标引入简化
main.js中继续引入
// 全局注册:图标引用简化
import svgIcon from './plugins/svgIcon.vue'
svgIcon.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconClassName" />
</svg>
</template>
<script setup lang="ts">
// 引用简化完需要全局注册
import {
computed } from 'vue'
const props = defineProps({
iconName: {
type: String,
required: true,
},
className: {
type: String,
default: '',
},
color: {
type: String,
default: '#409eff',
},
})
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {
return `#${
props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${
props.className}`
}
return 'svg-icon'
})
</script>
<style scoped>
// 每个图标给个默认样式
.svg-icon {
width: 1em;
height: 1em;
position: relative;
fill: currentColor;
vertical-align: -2px;
}
</style>
4.使用
icon-email-fill是图标名,在阿里图标库你加好的文件中,复制就行。
iconMenu是我为单个图标写的不同的样式。
<svg-icon className="iconMenu" iconName="icon-email-fill"></svg-icon>