vue3中引入、封装和使用svg矢量图的实现示例

时间：2024-07-18 09:37:05

前言：哈喽，大家好，我是码喽的自我修养！今天给大家分享vue3中引入和封装svg矢量图的实现示例！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到带大家，欢迎收藏+关注哦 ????

????????文章目录

一、SVG简介

1.  什么是SVG矢量图

2.  SVG矢量图的优缺点

二、引入和封装svg矢量图

1、安装SVG依赖插件

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

3、main.ts入口文件导入

4、使用svg

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

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

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

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

4.5 在页面使用

一、SVG简介

1.  什么是SVG矢量图

SVG全称Scalable Vector Graphics，它是网络上使用最广泛的矢量图格式。

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

我们将从以下几个方面对SVG矢量图进行详细分析：

  • 可扩展： SVG矢量图文件格式可以在不损害图像质量的情况下放大或缩小。

  • 矢量：SVG矢量图的本质上是实时渲染图像的代码片段，将其转换为你在屏幕上看到的像素。

  • 图形： SVG 是一种图像文件类型，其它的图像文件类型还包括：PNG、JPEG 或 GIF。

  • 当进行页面加载操作时，此SVG矢量图代码将转换为图形。它最大的特点就是可以将图片缩放到任何分辨率无论大小都不会损失质量。

  • 动画与透明度：SVG 支持动画和透明度，使其成为一种通用的文件格式。

2.  SVG矢量图的优缺点

虽然SVG矢量图没有PNG等光栅文件类型应用的广泛，但SVG矢量图的流行程度正在迅速增长。SVG矢量图能完成一些光栅图像无法完成的基本任务。这也是人们喜欢SVG矢量图 的原因。下面我们来看看SVG矢量图的优缺点吧：

  • SVG矢量图是可缩放的。你可以在任何分辨率的情况下进行设计，它可以放大或缩小尺寸而不会损坏质量。

  • 由于从未经历过质量损失，SVG矢量图总是看起来清晰漂亮。

  • 由于 SVG 只是代码，因此它们的文件大小并不大且经过了很好的优化。

  • SVG 优化器的存在使它们更易于管理。如果你改用SVG，你的网站可能会加载得更快一些，并且SVG 支持动画。

虽然SVG与PNG相比有相当多的优势，从可扩展到更小的尺寸，但 SVG也有较明显的缺点：

  • SVG在工作中可能会遇到在旧浏览器和设备上不兼容。

  • SVG 需要特殊的程序来创建和编辑。虽然你可以只使用 XML 来设计SVG格式，但这并不总是有效的。

  • SVG矢量图必须在页面加载时由浏览器呈现，因此使用过多的 SVG 或包含许多矢量的大文件会对设备造成一定负担。

二、引入和封装svg矢量图

1、安装SVG依赖插件

npm install vite-plugin-svg-icons -D
或
yarn add vite-plugin-svg-icons -D
或
pnpm install vite-plugin-svg-icons -D

2、在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]',
      }),
    ],
  }
}

3、main.ts入口文件导入

import 'virtual:svg-icons-register'

4、使用svg

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

4.2 在src/components目录下创建一个SvgIcon组件
<template>
  <svg :style="{ width, height }">
    <use :xlink:href="prefix + name" rel="external nofollow"  :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>
4.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])
    })
  },
}
4.4 在main.ts中引入plugin/index.ts文件
import GlobalComponents from '@/plugin'
app.use(GlobalComponents)
4.5 在页面使用
<svg-icon name="ticl" width="20px" height="20px"></svg-icon>

 好了，本文就到这里吧，点个关注再走嘛~  

???? 个人简介：某大型国企高级前端开发工程师，7年研发经验，信息系统项目管理师、****优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

???? 作    者：码喽的自我修养❣️
???? 专    栏：vue从基础到起飞
???? 若有帮助，还请 关注➕点赞➕收藏 ，不行的话我再努努力???????????? 

更多专栏订阅推荐：

???? 前端工程搭建
???? javaScript深入研究

???? 前端工作常见问题汇总

✍️ GIS地图与大数据可视化

✈️ HTML5与CSS3

⭐️ uniapp与微信小程序

相关文章