vue3中引入svg矢量图

vue3中引入svg矢量图

  • 1、前言
  • 2、安装SVG依赖插件
  • 3、在vite.config.ts 中配置插件
  • 4、main.ts入口文件导入
  • 5、使用svg
    • 5.1 在src/assets/icons文件夹下引入svg矢量图
    • 5.2 在src/components目录下创建一个SvgIcon组件
    • 5.3 封装成全局组件,在src文件夹下创建plugin/index.ts
    • 5.4 在main.ts中引入plugin/index.ts文件
    • 5.5 在页面使用

1、前言

在项目开发过程中,我们经常会用到svg矢量图,而且我们使用svg以后,页面上加载的不再是图片资源,这对页面性能来说是个很大的提升,而且我们svg文件比img要小的很多,放在项目中几乎不占用资源。

2、安装SVG依赖插件

npm install vite-plugin-svg-icons -Dyarn add vite-plugin-svg-icons -Dpnpm install vite-plugin-svg-icons -D

3、在vite.config.ts 中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {return {plugins: [createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]',}),],}
}

4、main.ts入口文件导入

import 'virtual:svg-icons-register'

5、使用svg

5.1 在src/assets/icons文件夹下引入svg矢量图

在这里插入图片描述

5.2 在src/components目录下创建一个SvgIcon组件

<template><svg :style="{ width, height }"><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><script setup>
defineProps({// 是否显示prefix: {type: String,default: '#icon-',},name: String,color: {type: String,default: '#000',},width: {type: String,default: '16px',},height: {type: String,default: '16px',},})
</script><style lang='scss' scoped></style>

5.3 封装成全局组件,在src文件夹下创建plugin/index.ts

//引入项目中的全局组件
import SvgIcon from '@/components/svgIcon.vue'//全局对象
const allGlobalComponents = { SvgIcon }//对外暴露插件对象
export default {install(app) {//注册项目的全部组件Object.keys(allGlobalComponents).forEach((key) => {//注册为全局组件app.component(key, allGlobalComponents[key])})},
}

5.4 在main.ts中引入plugin/index.ts文件

import GlobalComponents from '@/plugin'
app.use(GlobalComponents)

5.5 在页面使用

<svg-icon name="tick" width="20px" height="20px"></svg-icon>

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

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

相关文章

java springboot测试类虚拟MVC环境 匹配返回值与预期内容是否相同 (JSON数据格式) 版

上文java springboot测试类鉴定虚拟MVC请求 返回内容与预期值是否相同我们讲了测试类中 虚拟MVC发送请求 匹配返回内容是否与预期值相同 但是 让我意外的是 既然没人骂我 因为我们实际开发 返回的基本都是json数据 字符串的接口场景是少数的 我们在java文件目录下创建一个 dom…

基于51单片机倾角MPU6050老人跌倒远程GSM短信报警器+源程序

一、系统方案 1、本设计采用这51单片机作为主控器。 2、MPU6050角度值送到液晶1602显示。 3、红外传感器检测心率。 4、跌倒远程GSM报警。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 void LCD_Init() //初始化液晶时间显示 { write_com…

【译】Spring 6 入参数据校验: 综合指南

原文地址&#xff1a;Spring 6 Programmatic Validator: A Comprehensive Guide 一、前言 在 Spring 6.1 中&#xff0c;有一个非常值得注意的重要改进——编程式验证器实现。Spring 长期以来一直通过注解支持声明式验证&#xff0c;而 Spring 6.1 则通过提供专用的编程式验证…

【C/C++】素数专题

素数专题 1.判断素数模板2.求范围内的素数&#xff08;101-200&#xff09;3.判断素数与分解 1.判断素数模板 #include<stdio.h> #include<math.h>int prism(int n){if(n1) return 0;for(int i2;i<sqrt(n);i){if(n%i0) return 0;}return 1; }int main() {int n…

【Vue】浏览器安装vue插件

首先看一下安装之后的效果&#xff0c;再考虑一下要不要安装 安装完之后&#xff0c;打开浏览器控制台&#xff08;ctrl shift j) <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</t…

CV计算机视觉每日开源代码Paper with code速览-2023.11.20

点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【人脸识别】FRCSyn Challenge at WACV 2024:Face Recognition Challenge in the Era of Synthetic Data 论文地址&#xff1a;https://arxi…

金风玉露一相逢|实在智能联手浪潮信息合力致新生成式AI产业生态

近日&#xff0c;实在智能正式加入浪潮信息元脑生态AIStore。 实在智能是一家基于AGI大模型超自动化技术&#xff0c;领跑人机协同时代的人工智能科技公司&#xff0c;以其自研垂直的“TARS&#xff08;塔斯&#xff09;大语言模型”技术、实在RPA Agent智能体数字员工产品和超…

Qt 软件调试(一) Log日志调试

终于这段时间闲下来了&#xff0c;可以系统的编写Qt软件调试的整个系列。前面零零星星的也有部分输出&#xff0c;但终究没有形成体系。借此机会&#xff0c;做一下系统的总结。慎独、精进~ 日志是有效帮助我们快速定位&#xff0c;找到程序异常点的实用方法。但是好的日志才能…

锂电池搅拌机常见故障及预测性维护解决方案

锂电池搅拌机作为锂电池生产过程中的关键设备&#xff0c;负责混合和搅拌材料&#xff0c;对生产效率和产品质量具有重要影响。但由于长时间运行和复杂工作环境&#xff0c;锂电池搅拌机常常面临各种故障和维护需求。传统的故障修复维护方式往往是被动的&#xff0c;不能及时预…

【转载】如何在Macbook上把Ubuntu安装到移动硬盘里

我的设备系统版本、遇到的问题和解决&#xff1a; Mac&#xff1a;macOS Ventura 13.3 Ubuntu&#xff1a;22.04.3 问题&#xff1a; 按照这个教程在【3.3.10】修改完启动项后&#xff0c;Mac系统无法启动&#xff0c;Ubuntu可以正常启动。 原因&#xff1a; Mac找不到启动引导…

一键创新 | 拓世法宝AI智能直播一体机激发房产自媒体创造力

在数字化时代&#xff0c;房产销售已然不再是传统的模式。随着社交媒体和自媒体的兴起&#xff0c;短视频直播成为房产自媒体营销的新风口。然而&#xff0c;行业也面临着诸多挑战&#xff0c;如何更好地利用新媒体拓展市场&#xff0c;提升自媒体效果成为摆在业内人士面前的难…

指针笔试题分享

今天给大家分享几道关于指针的好题&#xff0c;我觉得的只要是题&#xff0c;都是好题咯&#xff01;下面来看看我们今天的题吧&#xff01; 题目一&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h>int main() {int a[5] { 1, 2, 3, 4, 5 };int* p…