vue3实战项目——网易云App【02-导入需要的iconfont】

本文链接：https://blog.csdn.net/weixin_45816803/article/details/124387171

本文详细介绍了如何在Vue项目中引入并使用阿里巴巴的IconFont图标库。首先，通过访问IconFont官网挑选并添加所需图标到项目。接着，将生成的链接导入到项目中的index.html。然后，创建一个名为IconFont的组件，封装SVG图标的使用。最后，在App.vue中调用组件，展示图标。通过封装组件，提高了代码的可读性和复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导入需要的iconfont

一、阿里巴巴的Iconfont

1、进入iconfont网站

点击链接进入：阿里巴巴iconfont

2、搜索想要使用的icon

将选中的icon加入购物车
在这里插入图片描述
点击右上角的购物车图标按钮，点击添加至项目，然后新建一个项目，确定。

生成代码，然后复制下来地址：

3、导入到项目中

打开VsCode，进入项目根目录，进入 /public/index.html，添加iconfont的链接进来。
在这里插入图片描述

4、封装iconfont组件

在 src/components 目录下新建一个文件，命名为 IconFont.vue，代码如下：

<template>
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="'#'+iconName"></use>
  </svg>
</template>

<script>
export default {
    name: 'IconFont',
    props:['iconName']
};
</script>

<style scoped>
.icon {
  width: 0.5em;
  height: 0.5em;
  font-size: 50px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

封装是为了使代码看起来更简洁，使用更方便

5、使用iconfont

我们在App.vue中添加如下代码：
icon的名称在这里：
在这里插入图片描述

<template>
  <!-- iconName为项目中的icon名称 -->
  <IconFont iconName="icon-daka" />
</template>

<script>
import IconFont from "./components/IconFont";

export default {
  name: "App",
  components: {
    IconFont
  }
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>