vue3+vue-cli4中怎么使用svg

Vue3 + Vue CLI 4 中怎么使用 SVG

在现代前端开发中，SVG（Scalable Vector Graphics）因其矢量特性、高清晰度和灵活性，成为了图标和图形的首选格式。Vue3 作为当前流行的前端框架之一，结合 Vue CLI 4 提供的强大工具链，可以非常方便地在项目中使用 SVG。本文将详细介绍如何在 Vue3 + Vue CLI 4 项目中使用 SVG，包括直接引入、作为组件使用、以及通过插件优化 SVG 的使用。

1. 直接引入 SVG

最简单的方式是直接在 Vue 组件中引入 SVG 文件。Vue CLI 4 默认支持导入静态资源，因此可以直接在模板中使用 <img> 标签引入 SVG 文件。

1.1 使用 <img> 标签引入 SVG

<template> <div> <img src="@/assets/logo.svg" alt="Logo" /> </div> </template> <script> export default { name: 'SvgExample', }; </script> 

这种方式简单直接，适合静态展示 SVG 图片的场景。然而，这种方式无法直接修改 SVG 的颜色、大小等属性，灵活性较差。

1.2 使用 require 动态引入 SVG

在某些情况下，可能需要动态引入 SVG 文件。可以通过 require 动态加载 SVG 文件。

<template> <div> <img :src="svgPath" alt="Dynamic SVG" /> </div> </template> <script> export default { name: 'DynamicSvgExample', data() { return { svgPath: require('@/assets/logo.svg'), }; }, }; </script> 

这种方式适合需要根据条件动态加载不同 SVG 文件的场景。

2. 将 SVG 作为 Vue 组件使用

为了更灵活地控制 SVG，可以将其作为 Vue 组件使用。这种方式允许我们在模板中直接使用 SVG 标签，从而可以方便地修改 SVG 的属性。

2.1 手动创建 SVG 组件

首先，将 SVG 文件的内容复制到一个 Vue 组件中。

<template> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24" > <path d="M12 2L2 22h20L12 2z" /> </svg> </template> <script> export default { name: 'SvgIcon', }; </script> 

然后，在需要使用 SVG 的地方引入该组件。

<template> <div> <SvgIcon /> </div> </template> <script> import SvgIcon from '@/components/SvgIcon.vue'; export default { components: { SvgIcon, }, }; </script> 

这种方式虽然灵活，但每个 SVG 都需要手动创建一个组件，维护成本较高。

2.2 使用 vue-svg-loader 自动导入 SVG 组件

为了简化 SVG 组件的使用，可以使用 vue-svg-loader 插件。该插件可以将 SVG 文件自动转换为 Vue 组件。

2.2.1 安装 vue-svg-loader

首先，安装 vue-svg-loader 和 vue-loader（如果尚未安装）。

npm install vue-svg-loader vue-loader --save-dev 

2.2.2 配置 vue.config.js

在 vue.config.js 中配置 vue-svg-loader。

const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ chainWebpack: (config) => { const svgRule = config.module.rule('svg'); svgRule.uses.clear(); svgRule .use('vue-loader') .loader('vue-loader') .end() .use('vue-svg-loader') .loader('vue-svg-loader'); }, }); 

2.2.3 使用 SVG 组件

配置完成后，可以直接在 Vue 组件中导入 SVG 文件作为组件使用。

<template> <div> <Logo /> </div> </template> <script> import Logo from '@/assets/logo.svg'; export default { components: { Logo, }, }; </script> 

这种方式既保留了 SVG 的灵活性，又简化了组件的创建过程。

3. 使用 svg-sprite-loader 创建 SVG 雪碧图

在某些场景下，可能需要将多个 SVG 图标合并为一个雪碧图，以减少 HTTP 请求。svg-sprite-loader 可以帮助我们实现这一目标。

3.1 安装 svg-sprite-loader

首先，安装 svg-sprite-loader。

npm install svg-sprite-loader --save-dev 

3.2 配置 vue.config.js

在 vue.config.js 中配置 svg-sprite-loader。

const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ chainWebpack: (config) => { const svgRule = config.module.rule('svg'); svgRule.uses.clear(); svgRule .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]', }); }, }); 

3.3 使用 SVG 雪碧图

配置完成后，可以在项目中使用 SVG 雪碧图。

<template> <div> <svg> <use xlink:href="#icon-logo" /> </svg> </div> </template> <script> import '@/assets/logo.svg'; export default { name: 'SvgSpriteExample', }; </script> 

这种方式适合需要大量使用 SVG 图标的场景，可以有效减少 HTTP 请求。

4. 使用 vite-plugin-svg-icons 优化 SVG 使用

如果你使用的是 Vite 作为构建工具，可以使用 vite-plugin-svg-icons 插件来优化 SVG 的使用。

4.1 安装 vite-plugin-svg-icons

首先，安装 vite-plugin-svg-icons。

npm install vite-plugin-svg-icons --save-dev 

4.2 配置 vite.config.js

在 vite.config.js 中配置 vite-plugin-svg-icons。

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-[dir]-[name]', }), ], }); 

4.3 使用 SVG 图标

配置完成后，可以在项目中使用 SVG 图标。

<template> <div> <svg> <use xlink:href="#icon-logo" /> </svg> </div> </template> <script> import '@/assets/icons/logo.svg'; export default { name: 'SvgIconExample', }; </script> 

这种方式结合了 Vite 的高效构建和 SVG 的灵活性，适合现代前端项目。

5. 总结

在 Vue3 + Vue CLI 4 项目中使用 SVG 有多种方式，每种方式都有其适用的场景。直接引入 SVG 文件简单直接，适合静态展示；将 SVG 作为组件使用则更加灵活，适合需要动态修改 SVG 属性的场景；使用 vue-svg-loader 可以简化 SVG 组件的创建过程；svg-sprite-loader 则适合需要大量使用 SVG 图标的场景，可以有效减少 HTTP 请求；而 vite-plugin-svg-icons 则结合了 Vite 的高效构建和 SVG 的灵活性，适合现代前端项目。

根据项目需求选择合适的方式，可以大大提高开发效率和用户体验。希望本文能帮助你在 Vue3 + Vue CLI 4 项目中更好地使用 SVG。