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-weapp
    presetWeapp(
      {
        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 mode
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    // 用于转换 微信小程序 不支持的 \\,\: \[ \$ \. 等转义类名, 实现在小程序中使用原子化css
    transformerClass(),
  ],
  theme: {
    color: {
      bg: 'rgba(22, 33, 255, 1)',
    },
  },
})

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Zig 语言通用代码生成器:逻辑,发布冒烟测试版二之二

Zig 语言通用代码生成器&#xff1a;逻辑&#xff0c;发布冒烟测试版二之二 Zig 语言通用代码生成器&#xff1a;逻辑&#xff0c;已发布冒烟测试版二。此版本完善了代码生成物。支持多对多关系。修复了所有单域动词。并有更多缺陷修复。暂时不支持图片类型。暂时不支持日期和…

Vue3的router和Vuex的学习笔记整理

一、路由的基本搭建 1、安装 npm install vue-router --registryhttps://registry.npmmirror.com 2、配置路由模块 第一步&#xff1a;src/router/index.js创建文件 第二步&#xff1a;在src/view下面创建两个vue文件&#xff0c;一个叫Home.vue和About.vue 第三步&#x…

远程连接服务

目录 一、远程连接服务器简介 二、连接加密技术简介 三、认证阶段 四、ssh实验 1.修改ssh服务器的端口号 2.拒绝root账户远程登录 3.允许特定用户ssh登录&#xff0c;其他用户无法登录 4.ssh-keygen 一、远程连接服务器简介 概念&#xff1a; 远程连接服务器通过文字或…

JS中面向对象

一、对象 1.认识对象 在JavaScript中&#xff0c;对象&#xff08;Object&#xff09;是一种复合数据类型&#xff0c;它允许你存储键值对。对象的属性是连接到对象的变量&#xff0c;而函数或方法是属于对象的函数。 JavaScript中的对象类似于哈希表&#xff0c;其中键可以是…

【工具变量】“宽带中国”试点城市名单匹配数据集(2000-2023年)

参照秦文晋&#xff08;2022&#xff09;的《网络基础设施建设对数字经济发展的影响研究——基于"宽带中国"试点政策的准自然实验》一文中的做法&#xff0c;将选为“宽带中国”试点城市的虚拟变量作为核心解释变量&#xff0c;当一个城市被批复成为“宽带中国”试点…

Matlab车牌识别课程设计报告(附源代码)

Matlab车牌识别系统 分院&#xff08;系&#xff09; 信息科学与工程 专业 学生姓名 学号 设计题目 车牌识别系统设计 内容及要求&#xff1a; 车牌定位系统的目的在于正确获取整个图像中车牌的区域&#xff0c; 并识别出车牌号。通过设计实现车牌识别系…

基于OSS搭建在线教育视频课程分享网站

OSS对象存储服务是海量、安全、低成本、高持久的存储服务。适合于存储大规模非结构化数据&#xff0c;如图片、视频、备份文件和容器/虚拟机镜像等。 安装nginx wget https://nginx.org/download/nginx-1.20.2.tar.gz yum -y install zlib zlib-devel gcc-c pcre-devel open…

Edit Data. Create Cell Editors. Validate User Input 编辑数据。创建 Cell Editors。验证用户输入

Goto Data Grid 数据网格 Edit Data. Create Cell Editors. Validate User Input 编辑数据。创建 Cell Editors。验证用户输入 Get and Modify Cell Values in Code 在代码中获取和修改单元格值 仅当 Grid 及其列已完全初始化时&#xff0c;才使用以下方法。如果需要在表单仍…

【JavaEE初阶 — 多线程】Thread的常见构造方法&属性

目录 Thread类的属性 1.Thread 的常见构造方法 2.Thread 的几个常见属性 2.1 前台线程与后台线程 2.2 setDaemon() 2.3 isAlive() Thread类的属性 Thread 类是JVM 用来管理线程的一个类&#xff0c;换句话说&#xff0c;每个线程都有一个唯一的Thread 对象与之关联&am…

【设计模式】如何用C++实现依赖倒置

【设计模式】如何用C实现依赖倒置 一、什么是依赖倒置&#xff1f; 依赖倒置原则&#xff08;Dependency Inversion Principle&#xff0c;DIP&#xff09;是SOLID面向对象设计原则中的一项。它的核心思想是&#xff1a; 高层模块不应该依赖于低层模块&#xff0c;两者都应该…

【文献及模型、制图分享】中国城市家庭食物浪费行为及减量对策——以郑州市为例

文献介绍 减少食物浪费是保障粮食安全的重要途径。家庭是社会的基本单元&#xff0c;不仅是产生食物浪费的主要场景&#xff0c;也是开展反食品浪费教育的重要场所。本文以河南省郑州市为例&#xff0c;基于1315份城市家庭食物浪费一手调查数据&#xff0c;首次将城市家庭食物…

【Linux】从零开始使用多路转接IO --- poll

碌碌无为&#xff0c;则余生太长&#xff1b; 欲有所为&#xff0c;则人生苦短。 --- 中岛敦 《山月记》--- 从零开始使用多路转接IO 1 前言1 poll接口介绍3 代码编写4 总结 1 前言 上一篇文章我们学习了多路转接中的Select&#xff0c;其操作很简单&#xff0c;但有一些缺…

linux网络编程自定义协议和多进程多线程并发

1.三次握手及后面过程 计算机A是客户端, B是服务端 1.1三次握手&#xff1a; 1客户端给服务端SYN报文 2服务端返回SYNACK报文 3客户端返回ACK报文 客户端发完ACK后加入到服务端的维护队列中&#xff0c;accept()调用后就能和客户端建立连接&#xff0c;然后建立通讯 1.2关闭…

[CARLA系列--01]CARLA 0.9.15 在Windows下的安装教程(一)

Carla是一款开源的自动驾驶仿真器&#xff0c;它基本可以用来帮助训练自动驾驶的所有模块&#xff0c;包括感知系统&#xff0c;Localization, 规划系统等等.Carla这个产品目前已经更新到了最新的0.9.15版本,目前遇到好多人在windows系统上如何安装可编辑版的Carla遇到了好多问…

【Qt聊天室客户端】用户信息界面设置功能实现

1. 按钮禁用关系梳理 基本逻辑梳理 用户界面-申请好友按钮 只有当前用户不是你的好友时&#xff0c;该按钮才可以使用&#xff0c;否则是禁用状态 用户界面-发送消息与删除好友 当前用户是你的好友时&#xff0c;按钮才可以使用&#xff0c;否则这两个按钮禁用区分是否是你好…

一张图简单讲述Mamba的演进过程

这张图表提供了 RNN&#xff08;1986&#xff09;、LSTM&#xff08;1997&#xff09;、Transformer&#xff08;2017&#xff09;和 Mamba&#xff08;2024&#xff09;四种不同的神经网络架构在训练阶段、测试阶段和额外问题方面的对比。可以看出&#xff0c;Mamba 作为一种最…

redis v6.0.16 安装 基于Ubuntu 22.04

redis安装 基于Ubuntu 22.04 本文演示如何在ubuntu22.04下&#xff0c;安装redis v6.0.16&#xff0c;并配置测试远程访问。 Step1 更新环境 sudo apt updateStep2 安装redis sudo apt install redis-server -yStep3 启动 sudo systemctl restart redissudo systemctl sta…

Postman:高效的API测试工具

在现代软件开发中&#xff0c;前后端分离的架构越来越普遍。前端开发者与后端开发者之间的协作需要一种高效的方式来测试和验证API接口。在这个背景下&#xff0c;Postman作为一款强大的API测试工具&#xff0c;受到了广泛的关注和使用。 今天将介绍什么是Postman、为什么要使用…

Vue指令:v-else、v-else-if

目录 1.语法&#xff1a; 2. 题目 3.页面展示 4.结构 1.语法&#xff1a; 1.作用&#xff1a;辅助v-if进行判断渲染 2.语法&#xff1a;v-else 、v-esle-if"表达式" 2. 题目 <!DOCTYPE html> <html lang"en"> <head><meta chars…

RANSAC(随机抽样一致性算法)

RANSAC&#xff08;随机抽样一致性算法&#xff09;是一种用于估计数学模型参数的迭代方法&#xff0c;尤其适用于包含大量异常值的数据。使用 RANSAC&#xff0c;我们可以找到一个最优的线性拟合&#xff0c;同时最大限度地减少对异常值的影响。接下来&#xff0c;我将给出一个…