### 如何在
Vue 3项目中
使用 `
vue-svg-icon` 库
#### 安装依赖包
为了能够在
Vue 3 中顺利引入并
使用 SVG 图标，首先需要安装必要的依赖项。这包括 `@
svgr/webpack` 和 `babel
-plugin
-import` 插件来处理和优化
SVG 文件。
```bash
npm install @
svgr/webpack babel
-plugin
-import
--save
-dev
```
#### 配置 Webpack 加载器
如果项目基于 Vite 或者其他现代构建工具，则不需要手动配置 webpack；但对于传统的
Vue CLI 构建体系而言，需修改 `
vue.config
.js` 来支持自动导入 `
.svg?inline` 的方式：
```javascript
module
.exports = {
chainWebpack: config => {
const
svgRule = config
.module
.rule('
svg');
svgRule
.uses
.clear();
svgRule
.use('babel
-loader')
.loader('babel
-loader')
.end()
.use('@
svgr/webpack')
.loader('@
svgr/webpack');
}
};
```
#### 创建全局组件注册脚本
创建一个新的 JavaScript 文件用于集中管理所有要
使用的
SVG 图标，并将其作为模块导出以便于后续引用。此文件通常位于项目的 `src/utils/
svg-icons
.js` 路径下[^1]。
```javascript
import { createApp } from '
vue';
import
SvgIcon from '@/components/
SvgIcon';
const app = createApp();
app
.component('
SvgIcon',
SvgIcon);
export default function load
Icons() {
const req = require
.context('@/assets/
icons/
svg/', false, /\
.svg$/);
const
icons = {};
req
.keys()
.forEach(key => {
const name = key
.replace(/(\
.\/|\
.svg)/g, '');
icons[name] = () => import(`@/assets/
icons/
svg/${name}
.svg`);
});
return
icons;
}
```
#### 注册图标至应用实例
编辑入口文件 `main
.js` ，通过调用上述定义好的函数完成对所需图标的批量加载与挂载操作[^2]。
```javascript
import { createApp } from '
vue';
import App from '
./App
.vue';
import load
Icons from '
./utils/
svg-icons';
createApp(App)
.mixin({
data() {
return {
icons: {}
};
},
created() {
this
.icons = load
Icons();
}
})
.mount('#app');
```
####
使用自定义 `<
svg-icon>` 组件
最后，在模板里可以直接利用已经声明过的 `<
svg-icon>` 标签显示对应的图形资源了。只需指定相应的名称属性即可实现按需渲染特定的图标。
```html
<template>
<div class="
icon-container">
<!
-- 假设有一个名为 home 的
svg -->
<
svg-icon :
icon-class="'home'" />
</div>
</template>
<script setup lang="ts">
// No additional script needed here
.
</script>
```
本文详细介绍了在Vue项目中使用SVG图标的过程，包括安装相关插件、配置vue.config.js、将SVG图标放入指定目录、创建并引入index.js、在main.js中引入以及在组件中如何使用自定义的<svg-icon>标签。
最低0.47元/天 解锁文章
扫一扫
2063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
