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.rhkb.cn/news/463787.html

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

相关文章

一篇文章理解CSS垂直布局方法

方法1&#xff1a;align-content: center 在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center进行垂直居中。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewpo…

基于STM32+华为云IOT设计的大棚育苗管理系统

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成 1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发 1.5 模块的技术详情介绍【1】NBIOT-BC26模块【2】MQ135传感器【4】SHT30传感器【5】B1750传感器 二…

小家电常用防水触摸IC

小家电常用防水触摸IC 挑战100个ICMAN“芯”实验-小家电常用防水触摸IC 电容式触摸芯片通常用于实现触摸控制&#xff0c;可轻松解决家用电器常见的触摸感应不灵敏和有水误触发的问题&#xff0c;优化了用户的交互使用体验&#xff0c;从而有效实现控制面板触摸按键的触摸感应和…

C++和OpenGL实现3D游戏编程【连载17】——着色器进阶

欢迎来到zhooyu的专栏。 主页网址&#xff1a;【zhooyu】 专栏网址&#xff1a;【C和OpenGL实现3D游戏编程】 &#x1f31f;&#x1f31f;&#x1f31f;这里将通过一个OpenGL实现3D游戏编程实例教程&#xff0c;带大家深入学习OpenGL知识。知识无穷而人力有穷&#xff0c;希望…

2342423

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

《Python游戏编程入门》注-第4章8

2.2 “黄色炸弹”的实现 “黄色炸弹”实际上是不断重复地从屏幕顶端落下的黄色圆圈。 2.2.1 设置炸弹位置及下落速度 从图1中可以看出,“黄色炸弹”落下的位置(水平方向)是随机的,图8所示代码用来设置炸弹位置及下落速度。 图8 设置炸弹位置及下落速度的代码 其中,bom…

如何打开/关闭 GitLab 的版本检查功能?

本文分享如何打开/关闭 GitLab 的版本检查功能。 极狐GitLab 是 GitLab 的中国发行版【https://dl.gitlab.cn/ncecn6kb】&#xff0c;中文版本对中国用户更友好&#xff0c;文章以私有化部署的极狐GitLab 实例来演示版本检查功能的开启和关闭。强烈不建议关闭该功能&#xff0…

Linux——Ubuntu环境C编程

配置vim编辑器 设置一个tab键为4个空格 打开/etc/vim/vimrc文件&#xff0c;此文件为只读&#xff0c;所以要用sudo访问boot权限&#xff1a; set ts4&#xff08;设置一个tab键为4空格&#xff09; set nu&#xff08;vim编辑器下显示行号&#xff09; gcc编译器 gcc命令…

java访问华为网管软件iMaster NCE的北向接口

最近做的一个项目&#xff0c;需要读取华为一个叫iMaster NCE的网管软件的北向接口。这个iMaster NCE&#xff08;以下简称NCE&#xff09;用于管理项目的整个网络&#xff0c;尤其是光网络。业主要求我们访问该软件提供的对外接口&#xff0c;读取一些网络信息&#xff0c;比如…

ABeam 德硕 | 共探AI时代人才新生态,ABeam旗下德硕管理咨询(上海)有限公司荣膺2024杰出雇主!

ABeam News 近日&#xff0c;由HRoot主办的“2024中国人力资本发展大会”在上海市徐汇西岸艺术中心A馆盛大开幕并成功举办。大会以“智能协同 人才与AI的共生”为主题&#xff0c;作为咨询公司的ABeam中国&#xff0c;以优秀的人才管理理念及成果&#xff0c;受邀参会并荣获20…

App Store 截图生成器:轻松制作专业级应用营销图片

在线使用 &#x1f449; 立即使用截图生成器 简介 App Store 截图生成器是一个专门为 iOS 开发者和营销人员设计的在线工具&#xff0c;可以快速生成符合 App Store 规范的应用预览图片。无论是 iPhone 还是 iPad 应用&#xff0c;都能轻松创建出精美的营销截图。 主要特点…

数据结构之顺序表(C语言)

1 线性表 线性表是n个具有相同特性的数据元素的有限序列&#xff0c;是一种在实际中广泛应用的数据结构&#xff0c;常见的线性表有&#xff1a;顺序表、链表、栈、队列、字符串等。 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线。但是在物理结构上并不一定是…

#【YashanDB认证】#YCA的学习过程总结-之崖山数据库初体验

概述 前段时间崖山数据库做推广活动&#xff0c;参加了yca的考试&#xff0c;为啥参加这个数据库厂商的学习呢&#xff0c;因为目前这个数据库最像Oracle&#xff0c;又听公司的前辈说呢&#xff0c;这个公司的前身是华为人出来做的数据库&#xff0c;华为人的精神呢&#xff0…

一些硬件知识【2024/11/3】

MLCC电容的ESR比较小&#xff0c;但是他的缺点是容量通常比较低&#xff1b;电解电容的容量比较大&#xff0c;但是他的ESR比较大&#xff1b;而钽电容介于两者之间&#xff0c;是MLCC找不到合适的容值比较大的时候&#xff0c;找钽电容&#xff1a; LC谐振电路&#xff1a; 五…

2024版红娘金媒10.3婚恋相亲系统源码小程序(亲测)

1. 红娘服务 红娘服务模块是该系统的一大特色。专业红娘会通过分析用户的个人资料和偏好&#xff0c; 为用户提供精准的配对建议和个性化服务。用户可以预约红娘服务&#xff0c;通过红娘的介入&#xff0c;提升配对成功率。 2. 相亲活动 相亲活动模块用于组织和管理线下或线…

自扶正救生艇,保障水上救援的安全卫士_鼎跃安全

在应急事件中&#xff0c;自扶正救生艇能够发挥关键的救援和保障作用&#xff0c;确保救援人员和被困人员的生命安全&#xff0c;尤其在极端天气或突发水上事故中展现出明显优势。 在救援过程中如果遭遇翻船&#xff0c;救生艇能够迅速恢复正常姿态&#xff0c;确保救援人员不会…

鸿蒙网络编程系列42-仓颉版域名解析示例

1. 域名解析简介 域名解析是网络开发中经常使用的功能之一&#xff0c;特别是对于当前版本的鸿蒙API&#xff0c;使用TCP或者UDP等网络协议通讯时&#xff0c;只能使用确定的IP地址进行绑定或者发送消息&#xff0c;还不支持直接使用域名&#xff0c;所以&#xff0c;通过域名…

6.0、静态路由

路由器最主要的功能就是转发数据包。路由器转发数据包时需要查找路由表&#xff08;你可以理解为地图&#xff09;&#xff0c;管理员可以直接手动配置路由表&#xff0c;这就是静态路由。 1.什么是路由&#xff1f; 在网络世界中&#xff0c;路由是指数据包在网络中的传输路…

玩转HF/魔搭/魔乐社区(作业)

任务描述时间模型下载使用Hugging Face平台、魔搭社区平台&#xff08;可选&#xff09;和魔乐社区平台&#xff08;可选&#xff09;下载文档中提到的模型&#xff08;至少需要下载config.json文件、model.safetensors.index.json文件&#xff09;&#xff0c;请在必要的步骤以…

QT——记事本项目

目录 1.给pushButton按键添加图片 1.1 首先复制存放图片的文件夹&#xff0c;打开Qt回到编辑页面&#xff0c;右键单击pro文件选择在Explorer中显示&#xff0c;将图片文件夹粘贴进去你的代码同目录即可 1.2 创建一个新的文件夹 1.3 点击Add Files&#xff0c;将所有图片添加…