Vue中引入svg图标的两种方式
Vue中引入svg图标的方式 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon', props: {
在Vue.js应用中，引入SVG图标是常见的需求，因为SVG图标具有良好的可伸缩性和响应性。本篇文章将详细介绍在Vue中引入SVG图标的两种主要方法。
### 方法一：使用`svg-sprite-loader`
我们需要通过npm或yarn安装`svg-sprite-loader`这个依赖。在终端中运行以下命令：
```bash
yarn add svg-sprite-loader --dev
```
或者
```bash
npm install svg-sprite-loader --save-dev
```
然后，创建一个SVG组件，例如`index.vue`：
```html
<template>
<svg class="svg-icon" :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
// 接收SVG图标名称
svgName: {
type: String,
required: true
}
},
computed: {
iconName () {
return `#icon-${this.svgName}`
},
svgClass () {
if (this.svgName) {
return 'svg-icon' + this.svgName
} else {
return 'svg-icon'
}
}
}
}
</script>
<style lang="less" scoped>
.svg-icon {
width: 100px;
height: 100px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
```
接下来，我们需要注册SVG组件到全局，以便在任何Vue组件中都能使用。在`index.js`中添加以下代码：
```javascript
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
// 注册到全局
Vue.component('svg-icon', SvgIcon)
// 读取SVG图标并自动导入
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
```
在`vue.config.js`中配置Webpack，以便处理SVG图标：
```javascript
module.exports = {
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
```
这里的`resolve`函数是用于获取相对路径的，需要在文件顶部定义：
```javascript
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
```
在需要使用SVG图标的Vue组件中，你可以这样引用：
```html
<svg-icon svg-name="ic_home_news" />
```
### 方法二：使用`vue-svg-component-runtime`
另一种引入SVG图标的方法是使用`vue-svg-component-runtime`库。安装该库：
```bash
npm install vue-svg-component-runtime --save
```
然后，创建一个SVG组件模板，如`SvgIcon.vue`：
```html
<template>
<svg-component :name="iconName" :class="svgClass"></svg-component>
</template>
<script>
import VueSvgComponentRuntime from 'vue-svg-component-runtime'
export default {
name: 'SvgIcon',
props: {
svgName: {
type: String,
required: true
}
},
components: {
SvgComponent: VueSvgComponentRuntime
},
computed: {
svgClass () {
if (this.svgName) {
return 'svg-icon' + this.svgName
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
/* 这里可以添加通用的SVG样式 */
</style>
```
接下来，将SVG图标文件夹中的每个SVG文件转换为Vue组件，可以使用`@vue/cli-service`提供的`vue-cli-service`命令：
```bash
vue-cli-service build --target lib --name icons src/icons/*.svg
```
这将在`dist`目录下生成一系列的SVG组件，然后在`main.js`或`index.js`中导入这些组件：
```javascript
import * as icons from '@/icons'
Object.keys(icons).forEach(name => {
Vue.component(name, icons[name])
})
```
现在，你可以在Vue组件中使用这些SVG组件：
```html
<SvgIcon svg-name="ic_home_news" />
```
这两种方法都可以有效地在Vue项目中引入SVG图标，并且可以根据项目需求和个人偏好选择合适的方法。使用SVG图标不仅可以提升网站的视觉效果，还能确保在不同屏幕尺寸和分辨率下的图标质量。
评论0