一、如何使用iconfont
首先需要到【我的项目】 --> 【新建项目】
修改【项目名称】、字体格式勾选【SVG】
选择需要的icon添加到购物车
点击购物车【添加至项目】
为了方便使用在线链接，将在线链接复制到项目
二、iconfont引入到项目中
将在线链接使用script引入
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script src="//at.alicdn.com/t/c/font_4648898_0qeynnuuzkqh.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
xlink:href是从iconfont【复制代码】，并且需要前缀保留#
// 子组件
// src\components\Icon\Icon.vue
<template>
<!-- Icon组件 -->
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-cz_mtiIcon-caozuo-you"></use>
</svg>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
// 父组件
// src\App.vue
<script setup lang="ts">
import Icon from './components/Icon/Icon.vue'
</script>
<template>
<div>
<Icon />
</div>
</template>
三、封装Icon组件
考虑到封装组件，需要将class与xlink:href用动态传入，以及将点击事件方法传出给父组件处理
// 子组件
// src\components\Icon\Icon.vue
<template>
<!-- Icon组件 -->
<div>
<svg :class="svgClass" aria-hidden="true" @click="clickIcon">
<use :xlink:href="iconName"></use>
</svg>
</div>
</template>
<script setup>
import { defineProps, ref, defineEmits } from 'vue';
const props = defineProps({
svgClass: {
type: String,
default: '', // 默认值
},
iconName: {
type: String,
required: true // 必传
}
});
const svgClass = ref(`icon ${props.svgClass}`);
const iconName = ref(`#${props.iconName}`);
const emit = defineEmits(); // 引入emit
const clickIcon = () => {
emit('clickIcon');
};
</script>
<style lang="scss" scoped>
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
cursor: pointer;
}
</style>
// 父组件
// src\App.vue
<script setup lang="ts">
import Icon from './components/Icon/Icon.vue'
const handleClick = () => {
console.log('点击了icon')
};
</script>
<template>
<div>
<Icon iconName="icon-cz_mtiIcon-caozuo-you" @clickIcon="handleClick"/>
</div>
</template>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。