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

1.网址:https://www.iconfont.cn/
2.手动创建自己的项目图标库
选中图标 → 添加入库(点击购物车)→ 完成后点击上方菜单栏的购物车
→ 添加至项目(没有则新建项目)→ 自动打开项目图标库 → 点击下载至本地
→ 点击demo包的demo_index.html,上面有三种使用方式,分别是Unicode、Font class、Symbol(这个本地demo包很关键需保留,使用时打开demo_index.html)
在这里插入图片描述

3.在vue项目中使用

3.1Unicode 的方式使用图标

1.将本地demo包中的
iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2
拷贝到 /src/assets/icon-font 文件夹下
2.在main.js中引入 iconfont.css

import './assets/icon-font/iconfont.css'

3.在组件中使用
容器:
编码: & #xe600; (直接拷贝demo中,Unicode下的对应图标下的图标码即可)

<span class="icon iconfont">&#xe600;</span>

此类图标相当于字体,常添加新class,通过 font-size控制图标大小,可以设置color等

<template><div><span class="icon iconfont kaishi">&#xe600;</span></div>
</template>
<style lang="less">
.kaishi {font-size: 32px;color: pink;
}
</style>

3.2Font class 的方式使用图标

1.将本地demo包中的
iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2
拷贝到 /src/assets/icon-font 文件夹下
2.在main.js中引入 iconfont.css

import './assets/icon-font/iconfont.css'

3.在组件中使用
容器:
类名: icon-kaishi (直接拷贝demo中,Font class下的对应图标下的类名即可)

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

此类图标相当于字体,常使用最后一个class,通过 font-size控制图标大小,可以设置color等
使用时在 font-class名称前加上 icon- 前缀

<template><div><i class="iconfont icon-kaishi"></i></div>
</template>
<style lang="less">
.icon-kaishi {font-size: 32px;color: pink;
}
</style>

3.3Symbol 的方式渲染图标

1.将本地demo包中的
iconfont.js
拷贝到 /src/assets/icon-font 文件夹下
2.在main.js中引入 iconfont.js

import './assets/icon-font/iconfont.js'

3.在组件中使用
容器:
类名: #icon-kaishi (直接拷贝demo中,Font class下的对应图标下的类名即可)

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

此类图标相当于图片,添加一个class,通过 width和height控制图标大小,可以通过fill设置图标颜色等

<template><div><svg class="icon svg-icon svgkaishi" aria-hidden="true"><use xlink:href="#icon-kaishi"></use></svg></div>
</template>
<style lang="less">
.svgkaishi {width: 32px;height: 32px;fill: pink;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/10427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Redis-02】Redis的缓存

Redis的缓存 1.概念1.1什么是缓存1.2为什么使用缓存1.3如何使用1.3.1不适用缓存之前1.3.2 缓存模型和思路&#xff08;使用方法&#xff09;1.3.3 使用之后 2.缓存更新策略2.1数据库缓存不一致解决方案2.2数据库和缓存不一致采用什么方案2.3代码实例 3.缓存穿透3.1缓存穿透是什…

(四)RabbitMQ高级特性(消费端限流、利用限流实现不公平分发、消息存活时间、优先级队列

Lison <dreamlison163.com>, v1.0.0, 2023.06.23 RabbitMQ高级特性&#xff08;消费端限流、利用限流实现不公平分发、消息存活时间、优先级队列 文章目录 RabbitMQ高级特性&#xff08;消费端限流、利用限流实现不公平分发、消息存活时间、优先级队列消费端限流利用限流…

一个简单的 Android 版本目录(Version catalog)实现指南

一个简单的 Android 版本目录实现指南 使用 TOML 格式 在本文中&#xff0c;我们将探讨版本目录以及如何实现它。 版本目录 Gradle 版本目录使您能够以可扩展的方式添加和维护依赖项和插件。因此&#xff0c;不必在各个构建文件中硬编码依赖项名称和版本&#xff0c;而是在目…

【NodeJs】如何将Markdown文件生成HTML文件在线浏览

经常用的编辑器是Markdown&#xff0c;有自带预览排版效果功能的&#xff0c;预览的是HTML网页&#xff0c;如果想要将它转换成HTML网页文件&#xff0c;要怎么做呢。 首先&#xff0c;借助Node的插件来做&#xff0c;在使用前&#xff0c;确保电脑已安装了NodeJS应用&#xf…

Linux相关指令(上)

常见指令&#xff1a; 1 pwd&#xff1a;查看用户当前所在目录 以下面的路径为例&#xff1a; 2 ls&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。 对于文件&#xff0c;将列出文件名以及其他信息 ls-l&#xff08;or ll&#xff09;&#xff1a;列…

【西安交通大学】:融合传统与创新的学府之旅

【西安交通大学】&#xff1a;融合传统与创新的学府之旅 引言历史与发展学校特色学科优势院系专业校园环境与设施学生生活与社团活动校友荣誉与成就未来发展展望总结&#x1f340;小结&#x1f340; &#x1f389;博客主页&#xff1a;小智_x0___0x_ &#x1f389;欢迎关注&…

Huge and Efficient! 一文了解大规模预训练模型高效训练技术

本文分为三部分介绍了大模型高效训练所需要的主要技术&#xff0c;并展示当前较为流行的训练加速库的统计。文章也同步发布在AI Box知乎专栏&#xff08;知乎搜索 AI Box专栏&#xff09;&#xff0c;欢迎大家在知乎专栏的文章下方评论留言&#xff0c;交流探讨&#xff01; 引…

效率与质量兼备的6个设计工具!

今天本文为大家推荐的这6个设计工具&#xff0c;将帮助设计师实现高效工作&#xff0c;同时也更好地展示自己的创作力&#xff0c;一起来看看吧&#xff01; 1、即时设计 即时设计是一款国内的设计工具&#xff0c;它为设计师提供了非常多实用的设计功能和精致的设计素材&…

【C++】开源:grpc远程过程调用(RPC)配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍grpc远程过程调用&#xff08;RPC&#xff09;配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜…

【转载+修改】pytorch中backward求梯度方法的具体解析

原则上&#xff0c;pytorch不支持张量对张量的求导&#xff0c;它只支持标量对张量的求导 我们先看标量对张量求导的情况 import torch xtorch.ones(2,2,requires_gradTrue) print(x) print(x.grad_fn)输出&#xff0c;由于x是被直接创建的&#xff0c;也就是说它是一个叶子节…

Linux查看内存的几种方法

PS的拼接方法 ps aux|head -1;ps aux|grep -v PID|sort -rn -k 4|head 进程的 status 比如说你要查看的进程pid是33123 cat /proc/33123/status VmRSS: 表示占用的物理内存 top PID&#xff1a;进程的ID USER&#xff1a;进程所有者 PR&#xff1a;进程的优先级别&#x…

python内置函数

https://www.runoob.com/python/python-built-in-functions.html https://www.runoob.com/python3/python3-function.html

【FLV】AVC+AAC的FLV解析过程及pts、dts计算

【flv解析】Audio Specific Config 协议及解析重新温习下flv的解析。针对h264 和aac 组成的FLV基础工具 从evbuffer 中获取数据是要同步删除的。看起来网络发来的flv是大端的数据。//进行大小端转换并取值 unsigned int getU32(evbuffer *buf) {unsigned char pbuf[4] = {

SSD寿命和写放大测试

一、简述 SSD寿命规格&#xff0c;业界标准为TBW&#xff0c;TBW指的是Terabyte Writteb写入的兆兆字节&#xff0c;也有定义为Total Bytes Written&#xff0c;SSD使用寿命结束之前指定工作量可以写入SSD的总数据量&#xff0c;用来表达固态硬盘的寿命指标。 因为 SSD 使用 N…

同步、异步、阻塞、非阻塞

一、概念 同步与异步&#xff08;线程间调用&#xff09;的区别&#xff1a;关注的是调用方与被调用方之间的交互方式。同步调用会等待被调用方的结果返回&#xff0c;而异步调用则不会等待结果立即返回&#xff0c;可以通过回调或其他方式获取结果。 阻塞非阻塞&#xff08;…

腾讯云高IO型云服务器CPU型号处理器主频性能

腾讯云服务器高IO型CVM实例CPU处理器主频性能说明&#xff0c;高IO型云服务器具有高随机IOPS、高吞吐量、低访问延时等特点&#xff0c;适合对硬盘读写和时延要求高的高性能数据库等I/O密集型应用&#xff0c;腾讯云服务器网分享高IO型云服务器IT5和IT3的CPU处理器说明&#xf…

springboot集成

maven配置 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <dependency><groupId>org.apache.commons</groupId><artifactId>…

qt5.15.2 交叉编译总结

最近项目需要&#xff0c;qt源码需要交叉编译&#xff0c;以前对这块不是很熟悉&#xff0c;从开始的一脸懵逼到最终成功编译出qt源码库&#xff0c;还是有了很多收获&#xff0c;分享给大家&#xff0c;希望对大家有所帮助。 交叉编译详解 还是先说交叉编译的思想。这里我以…

优化 PHP 数据库查询性能

优化 PHP 数据库查询性能可以从以下几个方面入手&#xff1a; 使用索引&#xff1a;在数据库中创建适当的索引可以大大提高查询性能。索引可以加快数据的查找速度&#xff0c;特别是在大型数据库中。选择合适的数据类型&#xff1a;选择正确的数据类型可以减少存储空间的占用&…

wordpress我的个人网站搭建

WordPress介绍 WordPress是一个功能强大且易于使用的网站管理平台。它是基于PHP和MySQL构建的&#xff0c;可以在各种不同的主机上运行。 wordpress对服务器的要求 需求最低版本要求PHP7.4 或更高版本MySQL5.6 或更高版本Web服务器任意&#xff08;如&#xff1a;Apache、Ng…