elementui svg
使用 Element UI 中的 SVG 图标
Element UI 提供了丰富的内置 SVG 图标，可以通过 el-icon 组件直接使用。以下是如何在项目中引入和使用这些图标的方法。
安装 Element UI 确保项目中已经安装了 Element UI。可以通过 npm 或 yarn 进行安装：
npm install element-ui --save
# 或
yarn add element-ui引入 Element UI 及其图标
在项目的入口文件（如 main.js）中全局引入 Element UI 及其图标：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);使用内置 SVG 图标 Element UI 的图标以组件形式提供，直接在模板中使用即可：
<template>
<div>
<el-icon name="el-icon-edit"></el-icon>
<el-icon name="el-icon-share"></el-icon>
<el-icon name="el-icon-delete"></el-icon>
</div>
</template>自定义 SVG 图标
如果需要使用自定义的 SVG 图标，可以通过 el-icon 组件结合 svg 标签实现：
<template>
<el-icon>
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L4 12l8 10 8-10z"></path>
</svg>
</el-icon>
</template>调整图标样式 通过 CSS 可以调整图标的颜色、大小等样式：
.el-icon {
color: #409EFF;
font-size: 24px;
}注意事项
- Element UI 的图标依赖于
el-icon组件，确保正确引入组件库。 - 自定义 SVG 图标时，建议设置
viewBox和fill属性以确保图标显示正常。 - 图标的大小可以通过
font-size调整，颜色通过color属性设置。
通过以上方法，可以灵活地在 Element UI 项目中使用内置或自定义的 SVG 图标。
