vue项目，Symbol 引用阿里矢量图

前端海里浑水摸鱼

已于 2024-01-18 10:37:51 修改

阅读量463

点赞数 7

文章标签：前端 vue.js

于 2024-01-18 10:33:56 首次发布

本文链接：https://blog.csdn.net/m0_59393112/article/details/135667233

版权

本文详细介绍了如何从阿里云矢量图标库下载SVGSymbol资源，并在Vue项目中正确引入CSS和JS，以及使用标签引用和显示图标。特别提到了Vue3中关于xlink:href属性的处理方式。

摘要由CSDN通过智能技术生成

下载资源：首先登录阿里云矢量图标库（iconfont.cn），选择你需要的图标添加到项目中，然后下载该项目的SVG Symbol格式资源包。解压下载的资源包，在你的项目里新建一个文件夹放在里面，像这样：

引入CSS和JS文件：将其中的iconfont.css和iconfont.js（或按需加载的版本）分别引入方法一：引入到你的index.html文件中，通常放在 <head> 标签内：

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="your-path/iconfont.css">
  <script src="your-path/iconfont.js"></script>
</head>
<body>
  <!-- ... -->
</body>
</html>

方法二：在main.ts文件里面引入

import '@/iconfont/iconfont.js';
import '@/iconfont/iconfont.css';

tips：使用 symbol方式引用必须引入iconfont.js可以不引入iconfont.css，

使用font-class 引用必须引入iconfont.css可以不引入iconfont.js，要不然图标不展示！

3.使用SVG Symbol：在阿里云矢量图标库生成的iconfont.svg文件中，每个图标都被定义为一个<symbol>元素，并拥有唯一的ID。你可以在HTML文档中的任何位置通过<svg>标签和<use>子标签来引用这些Symbol：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#your-icon-id"></use>
</svg>

<!-- 或者配合CSS样式 -->
<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

tips：请确保#your-icon-id替换为实际从阿里云矢量图标库获取的具体图标的ID

注意：Vue3中由于安全原因，默认移除了xlink:href属性的绑定支持，你需要安装 @vue/compat 并启用兼容模式，或者使用不受限制的 v-bind 写法来绑定 href 属性：

<use v-bind:xlink:href="`#your-icon-id`"></use>

或者使用不带命名空间的 href 属性（现代浏览器支持）：

<use :href="`#your-icon-id`"></use>

前端海里浑水摸鱼

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
vue项目，Symbol 引用阿里矢量图

首先登录阿里云矢量图标库（iconfont.cn），选择你需要的图标添加到项目中，然后下载该项目的SVG Symbol格式资源包。使用font-class 引用必须引入iconfont.css可以不引入iconfont.js，要不然图标不展示！tips：使用 symbol方式引用必须引入iconfont.js可以不引入iconfont.css，（或按需加载的版本）分别引入方法一：引入到你的index.html文件中，通常放在。：在阿里云矢量图标库生成的。属性的绑定支持，你需要安装。
复制链接

扫一扫