unocss 添加支持使用本地 svg 预设图标,并支持更改大小

安装 pnpm install @iconify/utils

在配置文件 unocss.config.tspresets > presetIcons 选项中

通过 FileSystemIconLoader 加载本地图标,并指定目录。

import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { defineConfig, presetIcons } from 'unocss'const { presetWeappAttributify, transformerAttributify } = extractorAttributify()import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders' // 支持通过 iconify 加载本地 svg 图标
export default defineConfig({presets: [// https://github.com/MellowCo/unocss-preset-weapppresetWeapp({isH5: process.env.TARO_ENV === 'h5',platform: 'taro',// 通过设置 taroWebpack 版本,指定 rem 策略taroWebpack: 'webpack5',// designWidth: 375,designWidth: 750,deviceRatio: {640: 2.34 / 2,750: 1,828: 1.81 / 2,375: 2 / 1},},),presetWeappAttributify(),// 预设图标presetIcons({// 添加 '$1"1em" ,支持动态改变图标大小collections: {// 不同模块,自定义图标前缀tender: FileSystemIconLoader('./src/assets/svg-icon/tenderDetail', svg => svg.replace(/(<svg.*?width=)"(.*?)"/, '$1"1em"').replace(/(<svg.*?height=)"(.*?)"/, '$1"1em"')),// appSvg: FileSystemIconLoader('./src/assets/svg-icon', svg => svg//   .replace(/(<svg.*?width=)"(.*?)"/, '$1"1em"').replace(/(<svg.*?height=)"(.*?)"/, '$1"1em"')),// ...}}),],shortcuts: [{'border-base': 'border border-gray-500/10','center': 'flex justify-center items-center',},],transformers: [// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify// 支持在小程序中使用 attributify modetransformerAttributify(),// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass// 用于转换 微信小程序 不支持的 \\,\: \[ \$ \. 等转义类名, 实现在小程序中使用原子化csstransformerClass(),],theme: {color: {bg: 'rgba(22, 33, 255, 1)',},},
})

使用:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

从0开始学习Linux——网络配置

往期目录&#xff1a; 从0开始学习Linux——简介&安装 从0开始学习Linux——搭建属于自己的Linux虚拟机 从0开始学习Linux——文本编辑器 从0开始学习Linux——Yum工具 从0开始学习Linux——远程连接工具 从0开始学习Linux——文件目录 上一个教程中&#xff0c;我们了解了…

Spring中的 InitializingBean、BeanPostProcessor、@PostConstruct 等初始化动作的执行时机分析

初始化Bean的时序图如下&#xff1a; 小结说明&#xff1a; 1、相同点&#xff1a;InitializingBean 的(afterPropertiesSet方法)、BeanPostProcessor、PostConstruct 都是在bean的属性注入完毕之后才执行&#xff0c;都可以用来进行bean的初始化动作 2、初始化执行顺序优先级…

【初阶数据结构与算法】沉浸式刷题之顺序表练习(顺序表以及双指针两种方法)

文章目录 顺序表练习1.移除数组中指定的元素方法1&#xff08;顺序表&#xff09;方法2&#xff08;双指针&#xff09; 2.删除有序数组中的重复项方法1&#xff08;顺序表&#xff09;方法2&#xff08;双指针&#xff09; 3.双指针练习之合并两个有序数组方法1&#xff08;直…

996引擎 - 活捉NPC

996引擎 - 活捉NPC 引擎触发 - 引擎事件(QF)事件处理模块 GameEvent测试文件参考资料 引擎触发 - 引擎事件(QF) cfg_game_data 配置 ShareNpc1 可以将QM和机器人的触发事件全部转到 QF 引擎触发是通用的,TXT的所有触发转换成小写后在LUA中就可使用,如说明书中缺省可反馈至对接群…

第十三届交通运输研究(上海)论坛┆新发展格局下高铁物流运输模式分析

0. 简介 交通运输研究&#xff08;上海&#xff09;论坛&#xff08;简称为TRF&#xff09;是按照国际会议的组织原则&#xff0c;为综合交通运输领域学者们构建的良好合作交流平台。交通运输研究&#xff08;上海&#xff09;论坛已经成功举办了十二届&#xff0c;凝聚了全国…

Qos基本原理+园区网络

解决网络拥塞最直接就是增加带宽&#xff0c;但是费钱。可以用Qos解决 Qos( Quality of Service) 设置不同流量不同优先级 1. QoS技术概述 延迟 v.s. 延迟抖动 延迟 vs 延迟抖动 延迟&#xff1a;指一个数据包从源端传输到目的端所需要的时间。延迟是一个静态的值&#xff0…

SQL用一个字段查询出数据的交集

出个SQL查询的题吧&#xff0c;有兴趣的可以看看 1、问题 下面有一份数据&#xff08;图1&#xff09;&#xff0c;由两部分组成&#xff1a;分析数据和基准数据 分析数据标识列为1&#xff0c;基准数据标识列为1&#xff0c;两字段0,1互斥 要求&#xff1a;按找出两部分数据…

【后端】javaweb过滤器Filter

过滤器Filter 实现敏感词、只能通过登录进入页面。 原理 当我们使用过滤器时&#xff0c;过滤器会对游览器的请求进行过滤&#xff0c;过滤器可以动态的分为3个部分&#xff0c;1.放行之前的代码&#xff0c;2.放行&#xff0c;3.放行后的代码&#xff0c;这3个部分分别会发挥…

C++初阶(十一)--STL--string类

目录 一、string类的概述 二、string类的创建与初始化 1. 直接初始化 2. 无参初始化 3. 从字符数组初始化 三、string类的基本操作 1.string的定义方式 2.string的插入 3.string的拼接 4.string的删除 5.string的查找 6.string的比较 7.string的大小和容量 8.st…

C#笔记 —— 事件

事件的语法 访问修饰符 event 委托类型 事件名&#xff1b; 例&#xff1a; public event Action myEvent; 事件的使用 事件的使用跟委托基本上一模一样&#xff0c; 1.但是事件不能在类外部直接赋值&#xff0c;只能使用 或 - 添加或删除函数&#xff1b; 2.事件不能在类…

Pandas | 理性判断数据是否存在缺失值的一种方法

理性判断 一般思路进一步思考df[B].explode() 一般思路 tcc.info()上述信息info显示没有缺失值 但是真实的情况还是要根据业务实际分析tcc.isnull().sum() # 和tcc.info()作用和tcc.info() 其实是一样的 进一步思考 在此过程中&#xff0c;我们需要检验是否存在采用别的值来表…

leetcode 382.链表随机结点

1.题目要求: 2.题目代码: /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *next) : val(x)…

Java Development Kit (JDK) 详解

什么是 JDK&#xff1f; JDK 是 Java Development Kit 的缩写&#xff0c;是一组用于开发 Java 应用程序的软件开发工具和库的集合。JDK 包含了 Java 运行时环境&#xff08;JRE&#xff09;和 Java 虚拟机&#xff08;JVM&#xff09;&#xff0c;以及一系列开发工具和库。 …

【5.8】指针算法-双指针验证回文串

一、题目 给定一个字符串&#xff0c;验证它是否是回文串&#xff0c; 只考虑字母和数字字符 &#xff0c;可以忽略字母的大小写。 说明&#xff1a; 本题中&#xff0c;我们将空字符串定义为有效的回文串。 示例 1: 输入: "A man , a plan , a canal : Panama " 输…

多功能 Web 应用渗透测试系统

系统简介 本项目命名为SecurityEye&#xff0c;是一款基于 Python-Django 的多功能 Web 应用渗透测试系统&#xff0c;包含漏洞检测、目录识别、端口扫描、指纹识别、域名探测、旁站探测、信息泄露检测、网站权重探测等功能。 项目功能 本系统通过旁站探测、域名探测、、域名…

libstdc++/so.6: version ‘GLIBCXX_3.4.29‘ not found (required by

matlab使用过程中提示库文件版图过低&#xff0c;如图 1. 网上或者其他eda的工具目录里面找一个libstdc.so.6.29文件&#xff0c;里面包含了glibcxx3.4.29 2. 复制文件到/usr/lib64目录下面 3. libstdc.so.6连接到新的库文件 unlink libstdc.so.6 ln -s libstdc.so.6.0.29 l…

有序数组的平方

给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 基础使用先平方&#xff0c;后排序的思想 class Solution {public int[] sortedSquares(int[] nums) {for(int i0;i<nums.length;i){nums…

flutter 专题七 Flutter面试之渲染流程

一、 简介 Flutter面试中必问的一个面试题就是渲染相关的话题。作为Google在2018年发布的一款跨平台UI框架&#xff0c;使用Dart作为其开发语言&#xff0c;底层使用Skia图形库进行视图渲染&#xff0c;渲染速度和用户体验堪比原生。 二、Flutter渲染流程 总的来说&#xff…

深入理解 TCP 的握手与挥手机制:为何握手 3 次,挥手 4 次?

在网络通信的世界里&#xff0c;TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种非常重要的协议&#xff0c;它确保了数据在网络中的可靠传输。而 TCP 的连接建立&#xff08;握手&#xff09;和连接断开&#xff08;挥手&#xff09…