Vue 使用 ElementUI(vue 使用svg)
在Vue项目中使用ElementUI并集成SVG图标，可以通过多种方式实现。介绍几种常见且有效的解决方案。
1. 直接使用ElementUI内置的Icon组件
ElementUI本身提供了丰富的矢量图标库，可以直接使用<el-icon>标签来引入图标。如果官方提供的图标满足需求，这是最简单的方式。
html
<template>
<div>
<!-- 使用ElementUI内置图标 -->
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
</template>
2. 引入自定义SVG图标
当需要使用自定义SVG图标时，有以下两种常用方法：
方法一：通过vue-cli-plugin-svg-sprite插件
-
安装依赖：
bash
npm install -D vue-cli-plugin-svg-sprite
-
配置vue.config.js：
js
module.exports = {
pluginOptions: {
'svg-sprite': {
dir: path.resolve(__dirname, 'src/assets/svg'), // SVG文件存放目录
generatorConfig: {
prefix: 'icon-', // 类名前缀
}
}
}
}
-
使用方式：
html
<template>
<svg class="icon">
<use xlink:href="#icon-example" rel="external nofollow" rel="external nofollow" ></use>
</svg>
</template>
方法二：直接引入单个SVG文件
- 将SVG文件放在
public目录下 - 在组件中直接引用：
html
<template>
<img src="@/assets/example.svg" alt="example"/>
</template>
3. 结合ElementUI与自定义SVG图标
如果想让自定义SVG图标和ElementUI样式保持一致，可以这样做：
-
在全局样式文件中添加：
css
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
-
组件中使用：
html
<template>
<i class="svg-icon" aria-hidden="true">
<use xlink:href="#icon-example" rel="external nofollow" rel="external nofollow" ></use>
</i>
</template>
4. 注意事项
- 确保SVG文件格式正确，使用简化的路径数据
- 使用SVG精灵图时要注意命名规范
- 对于不同分辨率屏幕，建议设置合理的默认尺寸
- 考虑SEO和无障碍访问，为每个图标添加适当的alt或aria-label属性
以上就是Vue结合ElementUI使用SVG图标的几种常见方法，开发者可以根据实际项目需求选择最适合的方式来实现。
