Element Plus的el-icon怎么用

<i class="el-icon-edit"></i>

<ElIcon :size="30" color="hotpink">
  <edit />
</ElIcon>

<!-- 也可以直接使用图标标签，无需父标签包裹 -->
<edit />

npm install @element-plus/icons-vue

# Yarn
yarn add @element-plus/icons-vue

# pnpm
pnpm install @element-plus/icons-vue

npm install @element-plus/icons-vue

import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@element-plus/icons-vue' // 引入所有图标，并命名为 Icons

const app = createApp(App)

// 通过遍历的方式注册所有 svg组件，会牺牲一点点性能
for (let i in Icons) {
  app.component(i, Icons[i])
}

app.mount('#app')

/* 省略部分代码 */
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标

const app = createApp(App)

app.component(Edit.name, Edit) // 全局注册 Edit 图标

app.mount('#app')

<template>
  <div>
    <edit />
  </div>
</template>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

<template>
  <div>
    <edit />
  </div>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 这个 svg组件
</script>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

# 选择其中一种方式安装即可。

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标
import App from './App.vue'

const app = createApp(App)
app.component(Edit.name, Edit) // 全局注册 Edit 图标

app
.use(ElementPlus)
.mount('#app')

<el-icon :size="20" color="hotpink">
  <edit />
</el-icon>

<template>
  <div>
    <el-icon :size="30" color="hotpink">
      <edit />
    </el-icon>
  </div>
</template>

<script setup>
import { ElIcon } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import 'element-plus/es/components/icon/style/css'
</script>