vue中使用阿里巴巴矢量图标库的图标

最新推荐文章于 2025-03-31 13:49:18 发布

fresh_nam

最新推荐文章于 2025-03-31 13:49:18 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/fresh_nam/article/details/124322647

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

文章目录

前言
一、配置
二、使用步骤

前言

vue一般使用element-ui等框架来构建页面样式，但是有时候里面自带的图标并不能满足我们的需求，而阿里巴巴矢量图标库里面正好有大量图标，现在就来学习一下如何引入图标。

一、配置

vue 2.x版本

二、使用步骤

1.下载图标

去阿里巴巴矢量图标库官网下载图标（建议：下载的时候先点小购物车添加到库，然后再点击右上角的小购物车将所有的图标添加到一个库后一起下载）
在这里插入图片描述

2.使用

1.解压

下载了之后，解压压缩包，会看到如下文件，其中的demo_index.html文件时教程文件，可以打开在浏览器里面查看
在这里插入图片描述
之后将除了demo文件以外的所有文件导入到vue项目中(位置随意，能找到就行)

2.引入并使用

因为我想要彩色图标，所以按照教程使用svg的方式引入，首先，在index.html中引入iconfont.js
index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <!-- 加了这句 -->
  <script src="./icon/iconfont.js"></script>
  <!-- 加了这句 -->
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

之后在对应的vue文件中添加style，并写上对应的html代码即可

<template>
  <div>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-caozhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-lvsedeshumuzhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-huahuaduozhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-guoshushuzhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-meiguihuahuahuaduozhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-shuiguoguoshi"></use>
    </svg>
  </div>
</template>

<script>
export default {};
</script>

<style>
.icon {
  width: 10em; /* 调节图标宽度 */
  height: 10em; /* 调节图标高度 */
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>