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.mzph.cn/bicheng/59239.shtml

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

相关文章

转换流详解

在Java中&#xff0c;处理文本数据时&#xff0c;我们经常需要将字节流转换为字符流&#xff0c;或者将字符流转换为字节流。这种转换通常用于读取文本文件或将数据从网络传输到应用程序。Java提供了两种主要的转换流&#xff1a;InputStreamReader 和 OutputStreamWriter。 1…

广东网站设计提升你网站在搜索引擎中的排名

在当今网络盛行的时代&#xff0c;拥有一个设计优良的网站&#xff0c;对企业的在线发展至关重要。特别是对于广东地区的企业来说&#xff0c;网站设计不仅仅是美观的问题&#xff0c;更直接影响着搜索引擎中的排名。因此&#xff0c;精心策划和设计的网站&#xff0c;能够显著…

VisualStudio远程编译调试linux_c++程序(二)

前章讲述了gdb相关&#xff0c;这章主要讲述用VisualStudio调试编译linux_c程序 1&#xff1a;环境 win10 VisualStudio 2022 Community ubuntu22.04 2:安装 1>vs安装时&#xff0c;勾选 使用c进行linux 和嵌入式开发 (这里以vs2022为例) OR VS安装好了&#xff0c; 选择工…

Netty 常见组件介绍

Netty 常见组件介绍 上篇文章Netty入门程序echo 基本包含了Netty常见的组件&#xff0c;本文分别介绍各个组件 Bootstrap or ServerBootstrapEventLoopEventLoopGroupChannelPipelineChannelFuture or ChannelFutureChannelInitializerChannelHandler Bootstrap vs ServerBo…

el-talble selection行 初始默认勾选

导言 el-talble selection 行&#xff08;选择列&#xff09;用于显示复选框&#xff0c;让用户可以选择或取消选择某些表格行&#xff0c;常用于批量操作场景。 刚刚试了下&#xff0c;想加深印象记录一下当学习碎片。参考的是表格多选并根据每行值初始化选中状态&#xff08;…

HTML 块级元素和内联(行内)元素详解

在 HTML 中,元素根据它们在页面中的表现方式分为两类:块级元素 和 内联元素(行内元素)。了解块级元素和内联元素的特性与使用方法,是掌握HTML开发的重要基础。本文将深入探讨这两类元素的特点及其在实际开发中的应用。 文章目录 一、块级元素1.1 块级元素是什么?1.2 块级…

使用Docker构建和部署微服务

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 [TOC] Docker 是一个开源的容器化平台&#xff0c;可以帮助开发者轻松构建、打包和部署应用程序。本文将详细介绍如何使用 Dock…

conda下jupyterlab安装问题以及交互绘图问题记录

安装 1. 直接conda install jupyterlab就好&#xff0c;只要在base环境下安装就行&#xff0c;可以在任意环境下执行jupyter lab启动。 2. 打开jupyter lab后显示Could not determine jupyterlab build status without nodejs&#xff0c;可以执行conda install nodejs安装no…

springcloud整合sentinel,限流策略持久化到nacos,详细配置案例

目录 1.组件下载和启动 &#xff08;1&#xff09;sentinel-dashboard下载 &#xff08;2&#xff09;nacos下载 &#xff08;3&#xff09;jmeter下载 &#xff08;4&#xff09;redis下载&#xff08;与流控关系不大&#xff0c;与项目启动有关&#xff09; 2.本微服务项…

【ONLYOFFICE 文档 8.2 版本深度测评】功能革新与用户体验的双重飞跃

引言 在数字化办公的浪潮中&#xff0c;ONLYOFFICE 文档以其强大的在线协作功能和全面的办公套件解决方案&#xff0c;赢得了全球用户的青睐。随着 8.2 版本的发布&#xff0c;ONLYOFFICE 再次证明了其在办公软件领域的创新能力和技术实力。 一.协作编辑 PDF&#xff1a;团队合…

Java爬虫:在1688上“照片快递”上传图片

想象一下&#xff0c;你是一名快递小哥&#xff0c;不过你送的不是包裹&#xff0c;而是图片——而且是用Java编写的爬虫作为你的快递车&#xff0c;将图片快速准确地送到1688的服务器上。今天&#xff0c;我们将一起化身为代码界的“照片快递”&#xff0c;使用Java爬虫技术&a…

深入探索ReentrantLock(三):限时锁申请的艺术

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 前言 一、ReentrantLock限时锁申请 1.限时锁申请的必要性 2.tryLock(long time, TimeUnit unit) 方法讲解 3.限时锁的优势与注意事项 4.tryLock(long time, TimeUnit unit)案例 总结 前言 Java并…

初始JavaEE篇——多线程(4):wait、notify,饿汉模式,懒汉模式,指令重排序

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 wait、notify 方法 多线程练习 单例模式 饿汉模式 懒汉模式 指令重排序 wait、notify 方法 wait 和 我们前面学习的sleep…

在线预览 Word 文档

引言 随着互联网技术的发展&#xff0c;Web 应用越来越复杂&#xff0c;用户对在线办公的需求也日益增加。在许多业务场景中&#xff0c;能够直接在浏览器中预览 Word 文档是一个非常实用的功能。这不仅可以提高用户体验&#xff0c;还能减少用户操作步骤&#xff0c;提升效率…

C++ 优先算法 —— 查找总价格为目标值的两个商品(双指针)

目录 题目 &#xff1a;查找总价格为目标值的两个商品 1. 题目解析 2. 算法原理 Ⅰ 暴力枚举 Ⅱ 双指针算法 3. 代码实现 暴力枚举 双指针算法 题目 &#xff1a;查找总价格为目标值的两个商品 1. 题目解析 题目截图&#xff1a; 这道题的一个关键的地方&#xff0c;它先…

Qt QCheckBox、QPushButton和QRadioButton详解

QCheckBox&#xff08;复选框&#xff09; 功能&#xff1a;QCheckBox用于创建一个复选框控件&#xff0c;允许用户从多个选项中选择多个。 属性&#xff1a; checkable&#xff1a;决定复选框是否可以被选中或取消选中。checked&#xff1a;表示复选框当前的选中状态&#…

自编以e为底的指数函数exp,性能接近标准库函数

算法描述&#xff1a; (1). 先做自变量x的范围检查&#xff0c;对于双精度浮点数&#xff0c;自变量不能超出(-1022ln2, 1024ln2)(-708.39, 709.78)&#xff0c;否则exp(x)会溢出。对于单精度浮点数&#xff0c;自变量不能超出(-126ln2, 128ln2)(-87.33, 88.72). 自己使用此函数…

数据结构-二叉树中的递归

目录 前言 简单手撕二叉树 二叉树节点的求解 二叉树叶子节点的求解 二叉树高度 二叉树第K层节点的个数 二叉树查找值为X的节点 结束语 前言 在这里说声抱歉&#xff0c;好久没更新数据结构了&#xff0c;二叉树的相关内容还没有更新完&#xff0c;是小编的失职&#xff…

在基于AWS EC2的云端k8s环境中 搭建开发基础设施

中间件下载使用helm,这里部署的都是单机版的 aws-ebs-storageclass.yaml apiVersion: storage.k8s.io/v1 kind: StorageClass metadata:name: aws-ebs-storageclass provisioner: kubernetes.io/aws-ebs parameters:type: gp2 # 选择合适的 EBS 类型&#xff0c;如 gp2、io1…

2024网鼎杯青龙组wp:Crypto1

题目 附件内容如下 from Crypto.Util.number import * from secret import flag from Cryptodome.PublicKey import RSAp getPrime(512) q getPrime(512) n p * q d getPrime(299) e inverse(d,(p-1)*(q-1)) m bytes_to_long(flag) c pow(m,e,n) hint1 p >> (51…