阿里巴巴矢量图标库Symbol方式引入

最新推荐文章于 2024-03-16 20:59:04 发布
最新推荐文章于 2024-03-16 20:59:04 发布
阅读量636 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 学习 代码 icon 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50794535/article/details/128492962
本文介绍了如何通过Symbol方式将阿里巴巴矢量图标库的图标引入Vue-cli项目。步骤包括：搜索图标，添加至项目，获取更新后的代码，修改index.html中的script标签，以及在Vue页面中使用图标。只需将use标签的href替换为复制的图标代码即可完成图标引入。

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

首先打开阿里巴巴矢量图标库网站：阿里巴巴矢量图标库

搜索你想要的图标
image

找到图标收入购物车
image

打开购物车，将图标添加至项目，如果没有项目，新建一个
image

在自己的项目下，选择symbol，点击更新代码
image

点击复制代码
image

vue-cli项目中的public目录下，打开index.html文件，添加代码

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset
最低0.47元/天 解锁文章

200万优质内容无限畅学
解锁UniApp新姿势：巧用阿里巴巴字体图标库
Jiaberrr的博客
02-13 1137
在UniApp开发中，图标是构建用户界面不可或缺的元素。一个简洁美观的图标，能够让应用的界面更加生动直观，提升用户体验。然而，在众多的图标资源中，如何选择合适的图标库并正确使用，成为了开发者需要面对的问题。阿里巴巴字体图标库，作为国内知名的图标资源平台，拥有丰富多样的图标资源，涵盖了各种场景和行业，为开发者提供了极大的便利。本文将详细介绍在 UniApp 中使用阿里巴巴字体图标库的方法和具体步骤，帮助大家快速掌握这一技能，提升开发效率。
在Vue项目中使用阿里巴巴矢量库下载的svg素材
larea的博客
02-28 703
后可对素材进行颜色、大小进行编辑，也可重命名，然后。之后放到assets文件夹下。中可通过下面的方式进行使用。
阿里巴巴矢量图标库的引入——symbol类型的使用——阿里图标组件封装
yehaocheng520的博客
04-20 5784
symbol类型的使用——阿里图标组件封装
阿里图标symbol引入+使用方法（vue3版本）
llssdshiyi的博客
05-08 1245
阿里图标库symbol本地下载使用方法（vue3版本）
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
qq_46103732的博客
11-24 4831
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
微信小程序之阿里图标库icon的symbol使用方式
ALittleCC的博客
08-17 2391
近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理。 但是压缩处理之后效果也没有很显著，而且再次进行压缩还需要收费。 最近研究了阿里巴巴矢量图标库的symbol使用方法。 把图标都放进一个项目 点击symbol生成地址 优势 支持多色图标了，不再受单色限制。 标签自带size属性，也可以通过css调整样式（使用过程中，在电脑上打开微信小程序，样式会有偏）。不过不影响手机端使用。 使用步骤 1.到你的根目录，鼠标右键，打开终端，输入 npm in
微信小程序引入阿里巴巴彩色图标字体（Symbol）
m0_54585610的博客
11-02 1460
步骤一：在微信小程序开发者工具的工作的根目录打开cmd，输入 npm install mini-program-iconfont-cli --save-dev 步骤二：输入命令，生成iconfont.json文件 npx iconfont-init 步骤三：将彩色图标添加入购物车，然后添加至你的项目 步骤四：更新代码后复制粘贴到iconfont.json的"symbol_url" 步骤五:iconfont.json: { "symbol_url": ...
路由怎么引入阿里巴巴矢量图标库的icon
最新发布
07-01
在前端项目中引入阿里巴巴矢量图标库（IconFont）是一个常见的需求，尤其是在使用 Vue 或基于 Element UI 的项目时。以下是如何在不同场景下正确引入和使用 IconFont 图标的方法： ### 在 Vue 项目中使用 IconFont ...
阿里巴巴矢量图标库怎么使用
02-13
### 阿里巴巴矢量图标库简介 阿里巴巴矢量图标库（Iconfont）是一个提供丰富图标资源的平台，拥有大量免费图标资源。该平台不仅支持多种格式如SVG、Font等，还允许开发者轻松地将这些图标集成到项目中[^4]。 ### ...
html中的svg,symbol和use标签
热门推荐
子燕若水的博客
12-08 1万+
<svg> Thesvgelement is a container that defines a new coordinate system andviewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.svg 元素是一个容器，它定义了一个新的坐标系和视口。...
ES6——Symbol(2)，HTML常用的五种标签
m0_61331407的博客
03-16 1052
在 ES5 使用字符串表示常量。例如：但是用字符串不能保证常量是独特的，这样会引起一些问题：default:try {// green 引发异常// 传递异常对象到错误处理但是使用 Symbol 定义常量，这样就可以保证这一组常量的值都不相等。用 Symbol 来修改上面的例子。default:try {// green 引发异常// 传递异常对象到错误处理。
解决iconfont图标symbol引用方式，图标不显示及不能变色的问题
fangcaojushi的博客
06-28 3818
解决iconfont图标无法改色 图标改色的关键是改color,还是改fill
HTML常用符号大全
phphot
04-05 8012
HTML常用符号：如何显示空格通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。最常用的字符实体(Character Entities)显示结果 说明 Entity Name Entity Number 显示一个空格    >
html里的symbol标签,export_symbol
weixin_39627455的博客
06-16 1087
全局变量 与export symbol区别如何查看中间文件export的symbolLinux中EXPO_SYMBOL的用法 EXPO_SYMBOL标签内定义的函数对全部内核代码公开，不用修改内核代码就可以在您的内核模块中直接调用。您还可以手工修改内核源代码来导出另外的函数，用于重新编译并加载新内核后的测试。在rt-thread中M_EXPO()是什么意思?#if defined(_MSC_VER...
字体图标的三种引用方法（三）
今天很喜欢小水
01-28 755
Symbol 引用 font-class 引用介绍 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点： 支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。 兼容性较差，支持 IE9+，及现代浏览器。 浏览器渲染 SVG 的性能一般，还不如 png。 symbol 引用步骤 symbol引用第一步：新建基本HTML项目，将下载的j
HTML积累知识
weixin_74155781的博客
01-30 233
【代码】HTML积累知识。
阿里云图标使用 (symbol 引用方式)
ws - 兮的博客空间
01-29 1765
阿里云图标网址: https://www.iconfont.cn/
项目中引用 iconfont —— Symbol 使用
cyyyeahey的博客
01-18 914
复制在线链接：使用：xlink:href 内容为图标名字。
阿里矢量图标的三种使用方式整理（uniapp）
时翎的博客
02-11 1万+
iconfont-阿里巴巴矢量图标库 web端iconfont使用 引用方式： 1.unicode 引用 （不支持多色，支持按字体的方式去动态调整图标大小，颜色） 2.font-class 引用 （unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的） 3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式） 兼容性 unicode >...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值