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

关于使用 @iconify/vue2图标库组件的离线使用

Iconify 是最通用的图标框架,将各种图标库的图标集中在这里的一个组件库,例如ant-design,element-ui等 网站地址如下
https://iconify.design/getting-started/

1.安装依赖

这两个包提供了图标组件和离线图标数据的支持。

npm install @iconify/vue2 @iconify/json

2. 准备离线图标数据

@iconify/json 包含了大量的图标数据,我们可以选择需要的图标集合并将其添加到我们的项目中。以 simple-line-icons 和 ant-design 图标为例,我们需要下载这两个图标集合的 JSON 文件:

simple-line-icons.json:包含了 Simple Line Icons 图标数据
ant-design.json:包含了 Ant Design 图标数据
可以从 @iconify/json 的 GitHub 仓库或其他可信来源下载这些 JSON 文件,并将它们放在您的项目中。

3.使用示例

<template><div><!-- 使用 Simple Line Icons 图标 --><Icon icon="simple-line:home" /><!-- 使用 Ant Design 图标 --><Icon icon="ant-design:search" /></div>
</template><script>import { Icon, addCollection } from '@iconify/vue2';import simple from '@iconify/json/json/simple-line-icons.json'import design from '@iconify/json/json/ant-design.json'export default {components: { Icon },mounted() {addCollection(simple)addCollection(design)},}
</script>

相关文章:

关于使用 @iconify/vue2图标库组件的离线使用

Iconify 是最通用的图标框架&#xff0c;将各种图标库的图标集中在这里的一个组件库&#xff0c;例如ant-design,element-ui等 网站地址如下 https://iconify.design/getting-started/ 1.安装依赖 这两个包提供了图标组件和离线图标数据的支持。 npm install iconify/vue2 i…...

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据&#xff0c;将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdf…...

PLM系统有哪些品牌推荐?国内不错的PLM厂商有哪些?

在当今快速变化的商业环境中&#xff0c;产品生命周期管理PLM系统已成为企业技术创新和管理创新的重要工具。PLM系统涵盖了产品从概念设计到市场推出、使用维护直至最终报废的整个生命周期&#xff0c;通过整合与产品相关的所有信息&#xff0c;助力企业实现高效、协同的产品开…...

Linux网络:网络套接字-TCP回显服务器——多进程/线程池(生产者消费者模型)

1.多进程版本 这里选择创建子进程&#xff0c;让子进程再创建子进程。父进程等待子进程&#xff0c;子进程的子进程处理业务逻辑。因为子进程是直接退出&#xff0c;子进程的子进程变成孤儿进程被系统管理&#xff0c;所以父进程在等待的时候不是阻塞等待的&#xff0c;所以可…...

Redis 篇-深入了解基于 Redis 实现消息队列(比较基于 List 实现消息队列、基于 PubSub 发布订阅模型之间的区别)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 消息队列的认识 2.0 基于 List 实现消息队列 2.1 基于 List 实现消息队列的优缺点 3.0 基于 PubSub 实现消息队列 3.1 基于 PubSub 的消息队列优缺点 4.0 基于 St…...

python 学习一张图

python学习一张图&#xff0c;python的特点的是学的快&#xff0c;一段时间不用&#xff0c;忘记的也快&#xff0c;弄一张图及一些入门案例吧。 写一个简单的测试&#xff1a; #!/usr/bin/python # -*- coding: UTF-8 -*- import osdef add_num(a, b):return a bif __name__…...

通过Docker部署 MongoDB 服务器

今天我们将在三丰云的免费服务器上进行 MongoDB 的部署测试。这款不错的免费服务器提供了很好的性能&#xff0c;1核CPU、1G内存、10G硬盘和5M带宽&#xff0c;足以满足我们的基本需求。三丰云的服务稳定&#xff0c;操作简单&#xff0c;真是一个值得推荐的选择&#xff0c;特…...

无人机避障雷达技术详解

随着无人机技术的飞速发展&#xff0c;其应用领域已经从最初的军事领域扩展到商业、农业、建筑巡检、应急救援、物流运输等多个领域。在这些多样化的应用场景中&#xff0c;无人机的安全性和稳定性显得尤为重要。无人机避障技术作为保障无人机安全飞行的核心技术之一&#xff0…...

2009-2023年上市公司华证esg评级评分数据(年度+季度)(含细分项)

2009-2023年上市公司华证esg评级评分数据&#xff08;年度季度&#xff09;&#xff08;含细分项&#xff09; 1、时间&#xff1a;2009-2023年 2、来源&#xff1a;整理自wind 3、指标&#xff1a;证券代码、年份、证券简称、评级日期、综合评级、综合得分、E评级、E得分、…...

C++ 模板进阶知识——stdenable_if

目录 C 模板进阶知识——std::enable_if1. 简介和背景基本语法使用场景 2. std::enable_if 的基本用法示例&#xff1a;限制函数模板只接受整数类型 3. SFINAE 和 std::enable_if示例&#xff1a;使用 SFINAE 进行函数重载SFINAE 的优点应用场景 4. 在类模板中使用 std::enable…...

国内外ChatGPT网站集合,无限制使用【2024-09最新】~

经过我一年多以来&#xff0c;使用各种AI工具的体验&#xff0c;我收集了一批AI工具和站点 这些工具都是使用的最强最主流的模型&#xff0c;也都在各个领域里都独领风骚的产品。 而且&#xff0c;这些工具你都可以无限制地使用。 无论你是打工人、科研工作者、学生、文案写…...

如何在VUE3中使用函数式组件

在Vue 3中&#xff0c;函数式组件的概念与Vue 2相似&#xff0c;但实现方式有所不同。函数式组件是一种无状态、无实例的组件&#xff0c;它们只根据传入的props和context来渲染输出。在Vue 3中&#xff0c;你可以通过定义一个函数并返回一个渲染函数来使用函数式组件。但是&am…...

linux访问外网的设置

Ubuntu | LUCKFOX WIKI 开发板配置​ 添加路由信息 sudo route add default gw 172.32.0.100添加 DNS servers 打开文件 sudo vi /etc/resolv.conf添加以下内容: nameserver 8.8.8.8联网测试 ping www.baidu.com开机自动配置 路由信息和 DNS servers 重启后会被清除,我们创建…...

PHP轻松创建高效收集问卷调查小程序系统源码

轻松创建&#xff0c;高效收集 —— 问卷调查小程序&#xff0c;你的调研神器&#xff01; 一、告别繁琐&#xff0c;一键开启调研之旅 还在为设计问卷、收集数据而头疼不已吗&#xff1f;现在&#xff0c;有了“问卷调查小程序”&#xff0c;一切都变得轻松简单&#xff01;无…...

Redis面试必问:Redis为什么快?Redis五大基本数据类型

请记住胡广一句话&#xff0c;所有的中间件所有的框架都是建立在基础之上&#xff0c;数据结构&#xff0c;计算机网络&#xff0c;计算机原理大伙一定得看透&#xff01;&#xff01;~ 1. Redis快的秘密 相信大部分Redis初学者都会忽略掉一个重要的知识点&#xff0c;Redis…...

InternVL2- dockerfile环境变量持久化使用`ENV`而不是`RUN export`来设置环境变量,以确保环境变量在容器运行时仍然可用

在Dockerfile中使用RUN export命令设置环境变量并不是一种持久化的方式。当你在Dockerfile中使用export命令时&#xff0c;它只会在当前构建阶段生效&#xff0c;并不会被持久化到生成的镜像中。这是因为export命令实际上是在shell环境中设置环境变量&#xff0c;而Docker构建过…...

Python(PyTorch和TensorFlow)图像分割卷积网络导图(生物医学)

&#x1f3af;要点 语义分割图像三层分割椭圆图像脑肿瘤图像分割动物图像分割皮肤病变分割多模态医学图像多尺度特征生物医学肖像多类和医学分割通用图像分割模板腹部胰腺图像分割分类注意力网络病灶边界分割气胸图像分割 Python生物医学图像卷积网络 该网络由收缩路径和扩…...

DevOps实现CI/CD实战(七)- Jenkins集成k8s实现自动化CI

自动化CI操作 1. 安装gitlab plugin 工具 ##### 2. 配置流水线任务的构建触发器&#xff0c;复制URL&#xff1a;http://192.168.201.111:8080/project/pipeline 3. Gitlab配置Webhooks&#xff0c;将上面的url&#xff1a;http://192.168.201.111:8080/project/pipeline粘…...

从ES6到ES2023 带你深入了解什么是ES

从ES6到ES2023&#xff0c;我们深入探索ECMAScript&#xff08;简称ES&#xff09;的演变与发展&#xff0c;了解这一JavaScript标准背后的技术革新和进步。ECMAScript作为JavaScript的标准化版本&#xff0c;每年都在不断推出新版本&#xff0c;为开发者带来更加丰富和强大的功…...

openVX加速-常见问题:适用场景、AI加速、安装方式等

1. 哪些算法处理推荐使用 OpenVX OpenVX 是非常适合图像处理和计算机视觉任务的框架&#xff0c;特别是在需要高性能和硬件加速的场景下。如果你的前处理和后处理涉及到图像滤波、边缘检测、颜色转换等操作&#xff0c;使用 OpenVX 可以带来性能提升。 OpenVX 更适合处理以下…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...