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 图标。