当前位置: 首页 > news >正文

vue3 + js + vite创建的项目中配置svg图

安装

npm install vite-plugin-svg-icons
npm install fast-glob

vite.config.js文件中配置如下内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[name]'})]
})

自定义组件,在项目中自定义一个名为svgIcon.vue的组件,该组件的内容如下

<template><div><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color" /></svg></div>
</template>
<script setup>import { computed } from 'vue'const props = defineProps({iconClass: {type: String,required: true},className: {type: String,default: ''},color: {type: String,default: ''}})const iconName = computed(() => `#icon-${props.iconClass}`)const svgClass = computed(() => props.className ? `svg-icon ${props.className}` : 'svg-icon')</script>
<style scoped>.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>

全局引入svgIcon组件

在main.js中全局引入如下内容

import 'virtual:svg-icons-register'
import SvgIcon from './components/svgIcon.vue'
const app = createApp(App)
app.component('svg-icon', SvgIcon)
app.use(router)
app.mount('#app')

使用svgIcon组件

这里假设在组件index.vue中使用

<template><div><svg-icon icon-class="vue"/></div>
</template>
<script setup></script>
<style scoped>
</style>

icon-class="vue"绑定的vue,其实就是在“src/assets/icons/vue.svg”这个图片
在这里插入图片描述

相关文章:

vue3 + js + vite创建的项目中配置svg图

安装 npm install vite-plugin-svg-icons npm install fast-globvite.config.js文件中配置如下内容 import { defineConfig } from vite import vue from vitejs/plugin-vue import { createSvgIconsPlugin } from vite-plugin-svg-icons import path from path export defau…...

c++ 找第一个只出现一次的字符

【题目描述】 给定一个只包含小写字母的字符串&#xff0c;请你找到第一个仅出现一次的字符。如果没有&#xff0c;输出no。 【输入】 一个字符串&#xff0c;长度小于100000。 【输出】 输出第一个仅出现一次的字符&#xff0c;若没有则输出no。 【输入样例】 abcabd【输出样…...

在 Unity 6 中使用APV为您的世界创建全局照明的新方法(一)

Unity 6 中推出的新照明功能让您能够更快速、更高效的完成对烘焙场景的照明工作&#xff0c;在本文中我们将与大家详细分享在 Unity 6 中应用自适应探针卷创建快速全局光照的更多细节与具体应用方法。由于内容比较丰富&#xff0c;我们将把内容分为三篇文章&#xff0c;以便大家…...

Win11安装安卓子系统WSA

文章目录 简介一、启用Hyper-V二、安装WSA三、安装APKAPK商店参考文献 简介 WSA&#xff1a;Windows Subsystem For Android 一、启用Hyper-V 控制面板 → 程序和功能 → 启用或关闭 Windows 功能 → 勾选 Hyper-V 二、安装WSA 进入 Microsoft Store&#xff0c;下拉框改为 …...

利用两种方式分别实现单例模式(懒汉式、饿汉式)

package testsingle;//实现单例的两种方式 public class TestMySingle {public static void main(String[] args) {ClassA ca1 ClassA.getClassA();ClassA ca2 ClassA.getClassA();System.out.println(ca1ca2);ClassB cb1 ClassB.getClassB();ClassB cb2 ClassB.getClassB(…...

js分页功能

先声明些全局变量方便我们在下面的代码中使用 //一页有多少条数据 let pagenum 10; //页码下标 let page_index 0; //总页数 let total_page; // 声明一个用于接数据的变量 let data&#xff1b; //获取数据 let res;通过获取数据渲染页面 // 渲染函数 function applys(da…...

Ubuntu20.04 编译运行 ORBSLAM2_with_pointcloud_map(以RGBD Orbbec Astra+为例)保姆级教程

Ubuntu20.04 编译运行 ORBSLAM2_with_pointcloud_map(以RGBD Orbbec Astra为例) 获取源码 git clone https://github.com/gaoxiang12/ORBSLAM2_with_pointcloud_map.git解压文件 得到如下内容 编译安装修改后的g2o cd g2o_with_orbslam2 mkdir build cd build cmake .. make…...

MyBatis(四)

第一章&#xff1a;MyBatis延迟加载策略 1. 延迟加载的概念 立即加载和延迟加载的区别&#xff0c;使用一对多的环境举例子。 立即加载&#xff1a;当前查询用户的时候&#xff0c;默认也把该用户所拥有的帐户信息查询出来了。 延迟加载&#xff1a;当前查询用户的时候&…...

【从零开始的LeetCode-算法】3285. 找到稳定山的下标

有 n 座山排成一列&#xff0c;每座山都有一个高度。给你一个整数数组 height &#xff0c;其中 height[i] 表示第 i 座山的高度&#xff0c;再给你一个整数 threshold 。 对于下标不为 0 的一座山&#xff0c;如果它左侧相邻的山的高度 严格大于 threshold &#xff0c;那么我…...

Docker常用命令总结~

1、关于镜像 获取镜像 docker pull [image name] [option:tag]AI助手//获取postgres镜像(没有设置镜像版本号则默认获取最新的&#xff0c;使用latest标记) docker pull postgres or docker pull postgres:11.14 列出本地镜像 docker imagesAI助手 指定镜像启动一个容…...

浅谈怎样系统的准备前端面试

前言 创业梦碎&#xff0c;回归现实&#xff0c;7 月底毅然裸辞&#xff0c;苦战两个月&#xff0c;拿到了美团和字节跳动的 offer&#xff0c;这算是从业以来第一次真正意义的面试&#xff0c;遇到蛮多问题&#xff0c;比如一开始具体的面试过程我都不懂&#xff0c;基本一直是…...

如何配置防火墙提高服务器安全性

配置防火墙是提高服务器安全性的重要措施之一。防火墙可以控制网络流量&#xff0c;限制未经授权的访问&#xff0c;防止恶意攻击。以下是配置防火墙以提高服务器安全性的详细指南。 一、为什么需要配置防火墙 防火墙的主要作用是&#xff1a; 限制未经授权的访问&#xff1a…...

java集合-Map HashMap 源码解析

hashMap简介 HashMap是基于哈希表实现的&#xff0c;每一个元素是一个key-value对&#xff0c;无序&#xff0c;不可重复。HashMap是非线程安全的&#xff0c;只是用于单线程环境下&#xff0c;多线程环境下可以采用concurrent并发包下的concurrentHashMap。HashMap 实现了Ser…...

案例分享|企查查的数据降本增效之路

分享嘉宾 任何强 企查查科技股份有限公司 大数据架构负责人 关于企查查 “企查查”是企查查科技股份有限公司旗下的一款企业信用查询工具。2023年5月20日&#xff0c;企查查正式发布全球首款商查大模型——“知彼阿尔法”&#xff0c;该模型基于企查查覆盖的全球企业信用数据进…...

图书馆管理系统(四)基于jquery、ajax--完结篇

任务3.6 后端代码编写 任务描述 这个部分主要想实现图书馆管理系统的后端&#xff0c;使用 Express 框架来处理 HTTP 请求&#xff0c;并将书籍数据存储在一个文本文件 books.txt 中。 任务实施 3.6.1 引入模块及创建 Express 应用 const express require(express); cons…...

什么是Modbus协议网关?

在工业自动化领域&#xff0c;设备间的通信与数据交换是实现高效、智能控制的关键。Modbus协议作为一种广泛应用的通信协议&#xff0c;自1971年由Modicon公司首次推出以来&#xff0c;便以其标准、开放、支持多种电气接口等特点&#xff0c;在工业控制系统中占据了重要地位。然…...

Docker 容器中启用 SSH 服务

在 Docker 容器中运行 SSH 服务需要一些调整&#xff0c;因为 Docker 容器通常使用 init 系统而不是完整的 systemd。以下是配置 SSH 服务在 Docker Ubuntu 容器中运行的步骤&#xff1a; 1. 安装 SSH 服务 如果还未安装 OpenSSH&#xff0c;请先安装&#xff1a; apt update…...

Linux系统—利用systemd管控系统以及服务详解(十四)

本文为Ubuntu Linux操作系统- 第十四弹~~ 新的一周开始了&#xff0c;时间过得真快&#xff0c;这星期就要冬至啦&#xff01;&#xff01; 今天继续Linux系统高级管理板块&#xff0c;主要讲述使用systemd管控系统和服务~ 上期回顾&#xff1a;“Linux系统—进程管理详解” 更…...

人工智能 AI 大模型研究设计与实践应用技术毕业论文

标题:人工智能 AI 大模型研究设计与实践应用技术 内容:1.摘要 人工智能 AI 大模型是当前人工智能领域的研究热点之一&#xff0c;它具有高度的通用性、灵活性和智能性&#xff0c;可以应用于多种领域&#xff0c;如自然语言处理、计算机视觉、语音识别等。本文旨在探讨人工智能…...

已有 containerd 的情况下部署二进制 docker 共存

文章目录 [toc]学习目的开始学习dockerd启动 containerd准备配置文件启动 containerd 启动 docker准备配置文件启动 docker 环境验证停止 docker 和 containerd 学习目的 使用容器的方式做一些部署的交付&#xff0c;相对方便很多&#xff0c;不需要担心别人的环境缺少需要的依…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...