未能找到引用的组件_封装icon组件

最新推荐文章于 2025-06-18 17:09:56 发布

原创最新推荐文章于 2025-06-18 17:09:56 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#未能找到引用的组件

博客介绍了阿里图标库的使用，包括注册账号、搜索添加图标到项目等步骤。还提到使用阿里iconfont的三种方法，重点讲解了font - class引用的特点和使用步骤。最后为方便引用图标，封装了icon组件，并提醒添加删除图标后需替换最新链接。

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

Icon是前端基础逼格的体现，开发中常用到的。这里推荐使用阿里的图标库。

Iconfont-阿里巴巴矢量图标库www.iconfont.cn

一、阿里图标库使用

先来快速入门阿里的图标库。先注册账号，
搜索图标，找到自己需要的图标，鼠标放在该图标上，会显示三个选项，点击“购物车图标”，添加入库。如下图：

点击购物车图标

选择完需要的图标后，点击右上角的购物车图标，将所选的图标添加到自己的项目中，如下图：

添加项目时，可以新建项目，或选择已有项目，如下图：

添加到项目

进入自己的项目，查看项目中的图标，如下图：使用阿里的iconfont有三种方法，分别是unicode、fontclass、symbol；下方是样式生成的链接，后面有实例来讲如何使用。

项目内容

鼠标放到对应的图标上，可以下载图标，修改图标等

修改图标

二、封装组件

这里你对阿里的iconfont已经了解了，接下来的问题是如何在我们的项目中使用icon，即引用icon。官方教程：

Iconfont-阿里巴巴矢量图标库www.iconfont.cn

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

为了在项目中更快速方便引用icon，接下来封装一个icon组件，代码如下：

<template>
  <i :class="iconName" style="font-size: 15px"></i>
</template>

<script>
export default {
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName () {
      return `iconfont icon-${this.iconClass}`
    }
  }
}
</script>

<style scoped>

  @import "//at.alicdn.com/t/font_866325_h72r0zr0dww.css";

</style>

icon组件

组件放在我习慣放在icon目录下。接下来全局注册组件。在main.js文件中加入以下代码：

import IconSvg from './icon/icon-svg'

// 全局注册icon-svg
Vue.component('icon-svg', IconSvg)

直接在项目需要icon的组件引用所需的icon图标即可，例如：

        <icon-svg icon-class="icon_wangye"></icon-svg>
        <icon-svg icon-class="cai"></icon-svg>
        <icon-svg icon-class="tudou"></icon-svg>

注意，每次在阿里的iconfont项目中添加删除icon，都会引起icon项目生成的css链接变化，所以在项目添加icon后，需要在icon组件替换最新生成的链接

@import"//at.alicdn.com/t/font_866325_h72r0zr0dww.css";