当前位置: 首页 > 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 更适合处理以下…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...