在现代前端开发中，SVG（Scalable Vector Graphics）因其矢量特性、高清晰度和灵活性，成为了图标和图形的首选格式。Vue3 作为当前流行的前端框架之一，结合 Vue CLI 4 提供的强大工具链，可以非常方便地在项目中使用 SVG。本文将详细介绍如何在 Vue3 + Vue CLI 4 项目中使用 SVG，包括直接引入、作为组件使用、以及通过插件优化 SVG 的使用。
最简单的方式是直接在 Vue 组件中引入 SVG 文件。Vue CLI 4 默认支持导入静态资源，因此可以直接在模板中使用 <img> 标签引入 SVG 文件。
计算
安全
数据库
网络和加速
企业服务
<img> 标签引入 SVG<template>
<div>
<img src="@/assets/logo.svg" alt="Logo" />
</div>
</template>
<script>
export default {
name: 'SvgExample',
};
</script>
这种方式简单直接，适合静态展示 SVG 图片的场景。然而，这种方式无法直接修改 SVG 的颜色、大小等属性，灵活性较差。
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 文件的场景。
为了更灵活地控制 SVG，可以将其作为 Vue 组件使用。这种方式允许我们在模板中直接使用 SVG 标签，从而可以方便地修改 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 都需要手动创建一个组件，维护成本较高。
vue-svg-loader 自动导入 SVG 组件为了简化 SVG 组件的使用，可以使用 vue-svg-loader 插件。该插件可以将 SVG 文件自动转换为 Vue 组件。
vue-svg-loader首先，安装 vue-svg-loader 和 vue-loader（如果尚未安装）。
npm install vue-svg-loader vue-loader --save-dev
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');
},
});
配置完成后，可以直接在 Vue 组件中导入 SVG 文件作为组件使用。
<template>
<div>
<Logo />
</div>
</template>
<script>
import Logo from '@/assets/logo.svg';
export default {
components: {
Logo,
},
};
</script>
这种方式既保留了 SVG 的灵活性，又简化了组件的创建过程。
svg-sprite-loader 创建 SVG 雪碧图在某些场景下，可能需要将多个 SVG 图标合并为一个雪碧图，以减少 HTTP 请求。svg-sprite-loader 可以帮助我们实现这一目标。
svg-sprite-loader首先，安装 svg-sprite-loader。
npm install svg-sprite-loader --save-dev
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]',
});
},
});
配置完成后，可以在项目中使用 SVG 雪碧图。
<template>
<div>
<svg>
<use xlink:href="#icon-logo" />
</svg>
</div>
</template>
<script>
import '@/assets/logo.svg';
export default {
name: 'SvgSpriteExample',
};
</script>
这种方式适合需要大量使用 SVG 图标的场景，可以有效减少 HTTP 请求。
vite-plugin-svg-icons 优化 SVG 使用如果你使用的是 Vite 作为构建工具，可以使用 vite-plugin-svg-icons 插件来优化 SVG 的使用。
vite-plugin-svg-icons首先，安装 vite-plugin-svg-icons。
npm install vite-plugin-svg-icons --save-dev
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]',
}),
],
});
配置完成后，可以在项目中使用 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 的灵活性，适合现代前端项目。
在 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。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
