当前位置： 首页 > news >正文

Vue 前端项目使用alibaba矢量库svg图标

news 文章来源：https://blog.csdn.net/qq_45912025/article/details/132754269 2024/11/7 3:40:50

Vue 前端项目使用alibaba矢量库svg图标

这里主要是记录 vue项目中使用阿里矢量库图标的操作流程，方便以后查阅！！！

一、简介

iconfont 是由阿里巴巴体验团队打造的，一款设计和前端开发的便捷工具.拥有着很强大且图标内容很丰富的矢量图标库,同时提供自定义图标,图标上传已经下载功能.目前有着70多万个图标

阿里矢量库图标地址
https://www.iconfont.cn/?spm=a313x.search_index.i3.2.34333a81z5z5IO

二、使用步骤详解

（一）选择多个图标到购物车中

（二）将购物车中图标（可以将多个同类型图标）添加至项目中，然后更改项目名称

在这里插入图片描述

（三）将项目下载到本地，解压并放到前端项目文件夹中

在这里插入图片描述

（四）页面引入css文件

在这里插入图片描述

（五）页面中使用，按钮中使用图标

在这里插入图片描述

（六）效果展示

在这里插入图片描述

关注林哥，持续更新哦！！！★,°:.☆(￣▽￣)/$:.°★ 。

相关文章：

Vue 前端项目使用alibaba矢量库svg图标

Vue 前端项目使用alibaba矢量库svg图标 这里主要是记录 vue项目中使用阿里矢量库图标的操作流程，方便以后查阅！！！ 一、简介 iconfont 是由阿里巴巴体验团队打造的，一款设计和前端开发的便捷工具.拥有着很强大且图标内…...

编程日记 2023/9/11 14:39:03

蓝桥杯官网填空题（距离和）

题目描述 本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。 两个字母之间的距离定义为它们在字母表中位置的距离。例如 A 和 C 的距离为 2，L 和 Q 的距离为 5。 对于一个字符串，我们称字符串中两两字符…...

编程日记 2023/9/11 14:38:01

【座位调整】Python 实现-附ChatGPT解析

疫情期间课堂的座位进行了特殊的调整，不能出现两个同学紧挨着，必须隔至少一个空位，给你一个整数数组desk，表示当前座位的占座情况，由若于0和1组成，其中 0 表示没有占位，1表示占位。在不改变原有座位秩序情况下，还能安排坐几个人? 输入描述: 第一行是一个数组，表示作为…...

编程日记 2023/9/11 14:37:01

前端面试基础面试题——5

1.react 和 vue 的区别是什么？ 2.虚拟DOM的原理？优点与缺点？ 3.类组件和函数组件之间的区别是？ 4.state 和 props 区别是什么？ 5.React 中 refs 是做什么的？ 6.什么是高阶组件？ 7.讲讲什么…...

编程日记 2023/9/11 14:36:00

Java高并发系列: 使用wait - notify实现高效异步方法

1. 背景 在项目开发中, 通常会有异步执行操作, 例如: 提交一个异步清空一系列数据库中ID ${_id} 的记录, 这个时候通常的做法是主线程将任务添加到一个异步队列中, 后台维护一个线程不断地循环扫描这个队列, 如果有需要执行的任务, 则执行相应的逻辑. 如下图所示: 2. 一个简…...

编程日记 2023/9/11 14:34:59

业务安全详解

文章目录 一、 业务安全概述1.1 业务安全现状1.1.1 业务逻辑漏洞1.1.2 黑客攻击的目标 二、 业务安全测试2.1 业务安全测试流程2.1.1 测试准备2.1.2 业务调研2.1.3 业务建模2.1.4 业务流程梳理2.1.5 业务风险点识别2.1.6 开展测试2.1.7 撰写报告 三、 业务安全经典场景3.1 业务…...

编程日记 2023/9/11 14:33:57

算法笔记--最大连续1的个数Ⅲ

leetcode题目链接:1004. 最大连续1的个数 III 题目描述 给定一个二进制数组 nums 和一个整数 k，如果可以翻转最多 k 个 0 ，则返回 数组中连续 1 的最大个数 。 思路 这里可以转换思路，让题意更加明确:即，求一个最大连续区间…...

编程日记 2023/9/11 14:32:54

Linux CentOS7 添加中文输入法

在安装CentOS7时，现在默认安装了桌面中文系统。可以切换为英文，中英文可以按要求随时更换。而在CentOS7桌面环境下，显示中文非常方便、正确，但不能录入中文。 在远程登录系统的情况下，不论是系统语言（LANG…...

编程日记 2023/9/11 14:31:53

Python接口自动化封装导出excel方法和读写excel数据

一、首先需要思考，我们在页面导出excel，用python导出如何写入文件的 封装前需要确认python导出excel接口返回的是一个什么样的数据类型 如下：我们先看下不对返回结果做处理，直接接收数据类型是一个对象，无法获取返回值…...

编程日记 2023/9/11 14:30:52

React三属性之:refs

作用 refs是为了获取节点,使用场景主要在需要操作dom的时候,比如echarts,就需要真实的dom节点 使用 import React from "react"; class RefsTest extends React.Component{state {value:输入框的值}refPlan React.createRef()logRef ()>{console.log(this.r…...

编程日记 2023/9/11 14:29:50

将Vue项目迁移到微信小程序中

文章目录 一、创建一个Vue.js的应用程序二、构建微信小程序1. 安装微信小程序构建工具2. 在vuejs项目的根目录中创建一个wepy.confgjs文件3. 在vuejs项目的根目录中运行构建 三、错误记录1. 找不到编译器：wepy-compiler-sass 一、创建一个Vue.js的应用程序 使用 Vu…...

编程日记 2023/9/11 14:28:48

php权限调整强制用户退出的解决方案

要强制用户重新登录，你可以采取以下步骤： 当用户登录时，将用户的登录状态和其他相关信息存储在服务器端。例如，你可以将用户ID、用户名或其他标识符存储在服务器的会话（session）中。当管理员修改用户的某些…...

编程日记 2023/9/11 14:27:47

[uniapp]踩坑日记 unexpected character ＞ 1或‘=’＞1 报错

在红色报错文档里下滑&#xff0c;找到Show more 根据提示看是缺少标签&#xff0c;如果不是缺少标签&#xff0c;看看view标签内容是否含有<、>、>、<号,把以上符合都进行以<号为例做{{“<”}}处理...

编程日记 2023/9/11 14:26:46

面试求职-经典面试问题

16个经典面试问题回答思路 面试过程中&#xff0c;面试官会向应聘者发问&#xff0c;而应聘者的回答将成为面试官考虑是否接受他的重要依据。对应聘者而言&#xff0c;了解这些问题背后的“猫腻”至关重要。本文对面试中经常出现的一些典型问题进行了整理&#xff0c;并给出相…...

编程日记 2023/9/11 14:25:38

在Linux服务器上部署Tornado项目

要在Linux服务器上部署Tornado项目&#xff0c;你可以按照以下步骤进行操作&#xff1a; 1、准备服务器&#xff1a; 确保你的服务器上安装了Python。Tornado通常与Python 3兼容&#xff0c;因此建议安装Python 3.x。 安装和配置一个Web服务器&#xff0c;如Nginx或Apache&a…...

编程日记 2023/9/11 14:24:37

JWT认证、drf-jwt安装和简单使用、实战之使用Django auth的User表自动签发、实战之自定义User表，手动签发

一 JWT认证 在用户注册或登录后&#xff0c;我们想记录用户的登录状态&#xff0c;或者为用户创建身份认证的凭证。 我们不再使用Session认证机制&#xff0c;而使用Json Web Token&#xff08;本质就是token&#xff09;认证机制。Json web token (JWT), 是为了在网络应用环境…...

编程日记 2023/9/11 14:23:36

conda常用命令及问题解决-创建虚拟环境

好久没写博文了&#xff0c;感觉在学习的过程中还是要注意积累与分享&#xff0c;这样利人利己。 conda包清理&#xff0c;许多无用的包是很占用空间的 conda clean -p //删除没有用的包 conda clean -y -all //删除pkgs目录下所有的无用安装包及cacheconda创建虚拟环境…...

编程日记 2023/9/11 14:22:35

严选算法模型质量保障

在算法模型整个生命周期**&#xff08;算法模型生命周期&#xff1a;初始训练数据 --> 模型训练 --> 模型评估 --> 模型预估 --> 训练数据&#xff09;**中&#xff0c;任何环节的问题引入都可能导致算法模型质量问题。所以我们在做模型质量保障的过程中&#xff0…...

编程日记 2023/9/11 14:21:33

学习Bootstrap 5的第七天

目录 徽章 徽章 实例 上下文徽章 实例 胶囊徽章 实例 元素内的徽章 实例 进度条 基础进度条 实例 进度条高度 实例 彩色进度条 实例 条纹进度条 实例 动画进度条 实例 混合色彩进度条 实例 徽章 徽章 在 Bootstrap 中&#xff0c;徽章&#xff08;Badg…...

编程日记 2023/9/11 14:20:32

VirtualBox（内有Centos 7 示例安装）

1常见概念以及软件安装 1.1 虚拟化技术&#xff1a; 虚拟化技术指的是将计算机的各种硬件资源加以抽象、转换、分割&#xff0c;最后组合 起来的技术。其目的和作用主要是打破硬件资源不可分的情况&#xff0c;方便程序员自 己集成所需资源。 1.2 Virtual Box 其是虚拟化技术作…...

编程日记 2023/9/11 14:19:31

在 Git 中删除不再位于远程仓库中的本地分支

git 删除远端已经被删除然而本地还存在的分支 1. 修剪不在远程仓库上的跟踪分支 git remote prune origin如果git仓库将branch1被删除&#xff0c;可以用用git remote prune origin删除在本地电脑上的remotes/origin/branch1 git remote show origin可以看到下面所示&#xf…...

编程日记 2023/9/11 14:18:29

容器编排学习（九）服务管理与用户权限管理

一 service管理 1 概述 容器化带来的问题 自动调度&#xff1a;在 Pod 创建之前&#xff0c;用户无法预知 Pod 所在的节点&#xff0c;以及 Pod的IP 地址一个已经存在的 Pod 在运行过程中&#xff0c;如果出现故障&#xff0c;Pod也会在新的节点使用新的IP 进行部署应用程…...

编程日记 2023/9/11 14:17:28

【C刷题】day1

一、选择题 1.正确的输出结果是 int x5,y7; void swap() { int z; zx; xy; yz; } int main() { int x3,y8; swap(); printf("%d,%d\n"&#xff0c;x, y); return 0; } 【答案】&#xff1a; 3&#xff0c;8 【解析】&#xff1a; 考点&#xff1a; &#xff…...

编程日记 2023/9/11 14:16:27

zabbix配置钉钉告警、和故障自愈、监控java

文章目录 1.配置钉钉告警server 配置web界面创建媒介给用户添加媒介测试告警 实现故障自愈功能监控Javazabbix server 安装java gateway配置 Zabbix Server 支持 Java gateway使用系统内置模板监控 tomcat 主机 1.配置钉钉告警 server 配置 钉钉告警python脚本 脚本1 cd /…...

编程日记 2023/9/11 14:15:26

第九章 Linux实际操作——Linux磁盘分区、挂载

第九章 Linux实际操作——Linux磁盘分区、挂载 9.1 Linux分区9.1.1原理介绍9.1.2 硬盘说明9.1.3 查看所有设备搭载情况 9.2 挂载的经典案例9.2.1 说明9.2.2 如何增加一块硬盘9.2.3 虚拟机增加硬盘步骤 9.3 磁盘情况查询9.3.1 查询系统整体磁盘使用情况9.3.2 查询指定目录的磁盘…...

编程日记 2023/9/11 14:14:25

设计模式-解释器设计模式

文章目录 前言一、 解释器模式的结构1、抽象表达式&#xff08;Abstract Expression&#xff09;2、终结符表达式&#xff08;Terminal Expression&#xff09;3、非终结符表达式&#xff08;Non-terminal Expression&#xff09;4、上下文&#xff08;Context&#xff09;5、客…...

编程日记 2023/9/11 14:13:24

实现 js 中所有对象的深拷贝（包装对象，Date 对象，正则对象）

通过递归可以简单实现对象的深拷贝&#xff0c;但是这种方法不管是 ES6 还是 ES5 实现&#xff0c;都有同样的缺陷&#xff0c;就是只能实现特定的 object 的深度复制&#xff08;比如数组和函数&#xff09;&#xff0c;不能实现包装对象 Number&#xff0c;String &#xff0…...

编程日记 2023/9/11 14:12:22

PathVariable注解

postman测试传参&#xff1a;http://localhost:8080/admin/employee/2 PathVariable PathVariable注解用法和作用...

编程日记 2023/9/11 14:11:22

宋浩高等数学笔记（十二）无穷级数

完结&#xff0c;宋浩笔记系列的最后一更~ 之后会出一些武忠祥老师的错题&笔记总结&#xff0c;10月份就要赶紧做真题了...

编程日记 2023/9/11 14:10:21

使用Clipboard插件实现Vue的剪贴板功能

在Web开发中&#xff0c;剪贴板功能是一个常见但又非常有用的功能。通过将数据复制到剪贴板&#xff0c;用户可以方便地将数据粘贴到其他应用程序或网站上。在本文中&#xff0c;我们将介绍如何使用Clipboard插件结合Vue框架实现剪贴板功能。 Clipboard插件简介 Clipboard插件…...

编程日记 2023/9/11 14:09:20

海报设计论文/做专业搜索引擎优化

微软公司预计在2010年一月份(09年10月24日已经全球发布)推出Windows 7 &#xff0c;但由于要先发行预测版&#xff0c;可能真正发布时间要迟些。为什么新的操作系统叫Windows 7呢&#xff1f;我们都知道有个Windows NT&#xff0c;但现在好像没谁平时还在说&#xff0c;都在说X…...

编程日记 2024/11/7 2:22:53

wordpress评论美化/如何做好精准营销

windows10下升级node.js和降级Nodejs_cheerileeyoki的博客-CSDN博客_win10 升级nodejs...

编程日记 2024/11/6 22:28:59

网站数据库怎么建立/百度官方平台

恐怕谁也没想到&#xff0c;智能翻译机这样看似小众的产品能引起AI硬件的销售热潮。数据显示&#xff0c;最近在京东预售的搜狗旅行翻译宝在3月19日开售一小时后就被抢购一空。”据悉&#xff0c;搜狗此次销售额破 1000 万&#xff0c;登顶京东该品类冠军。”如果说AlphaGo第一…...

编程日记 2024/11/6 18:55:35

网站建设 青海/seo外包公司专家

其实可以用存储过程&#xff0c;但想用另一种方法实现&#xff1a; 首先创建一个辅助表&#xff0c;可以设置CREATE TABLE t4 (id int(11) NOT NULL AUTO_INCREMENT,num int(11) DEFAULT NULL,PRIMARY KEY (id) )insert into t4(num) select id from xxx limit 31;(偷懒插入31条…...

编程日记 2024/11/6 17:32:51

百度seo优化技巧/seo网络推广报价

only-child :empty 元素内容为空 &#xff1a;not...

编程日记 2024/11/6 10:50:32

龙岩做网站开发找哪家/班级优化大师

1. 路由器基本配置请注意&#xff1a;JUNIPER路由器命令不是即时生效的&#xff0c;而是需要通过commit命令来使的命令生效&#xff0c;如果是双的路由引擎&#xff0c;则需要通过commit synchronize来使得命令生效并让配置在两个路由引擎&#xff08;RE&#xff09;里同步配置…...

编程日记 2024/11/6 10:10:59