Icon
Element Plus proporciona un conjunto de iconos propios.
Uso de iconos
Si quiere usarlos directamente como en el ejemplo, necesita registrar globalmente los componentes antes de usarlos.
Si desea ver todos los iconos SVG disponibles, compruebe @element-plus/icons-vue@1.@element-plus/icons-vue@latest y la fuente element-plus: iconos fuera o Colección de iconos
Instalación
Usando gestor de paquetes
# Elija el gestor de paquetes que prefiera.
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
Registrar todos los iconos
Necesitas importar todos los iconos de @element-plus/icons-vue y registrarlos globalmente.
// main.ts
// if you're using CDN, please remove this line.
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
También puede consultar esta plantilla.
Importar en el navegador
Puede importar iconos de Element Plus directamente a las etiquetas HTML del navegador y usar la variable global ElementPlusIconsVue.
Según los diferentes proveedores de CDN hay diferentes URLs de importación. Aquí se usa unpkg y jsDelivr como ejemplo. También puede utilizar otros proveedores CDN.
unpkg
<script src="//unpkg.com/@element-plus/icons-vue"></script>
jsDelivr
<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
TIP
Recomendamos usar CDN para importar Element Plus. Empleándolo podrá bloquear la versión en la dirección del enlace, para no verse afectado por actualizaciones incompatibles cuando Element Plus se actualice en el futuro. Por favor, consulte en unpkg.com para el método para bloquear la versión.
Auto Importar
Use unplugin-icons y unplugin-auto-import para importar automáticamente cualquier colección de iconos de iconify. Puede consultar esta plantilla.
Uso simple
WARNING
Debido a que el estándar HTML ya ha definido una etiqueta llamada menu, necesita usar un alias para renderizar el icono, si registra Menu directamente no funcionará.
<!-- Use el-icon to provide attributes to SVG icon -->
<template>
<div>
<el-icon :size="size" :color="color">
<Edit />
</el-icon>
<!-- Or use it independently without derive attributes from parent -->
<Edit />
</div>
</template>
Combinado con el-icon
el-icon proporciona atributos adicionales para el icono SVG crudo, para más detalles, por favor lea al final.
<template>
<p>
with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
seconds, you can also override this
</p>
<el-icon :size="20">
<Edit />
</el-icon>
<el-icon color="#409efc" class="no-inherit">
<Share />
</el-icon>
<el-icon>
<Delete />
</el-icon>
<el-icon class="is-loading">
<Loading />
</el-icon>
<el-button type="primary">
<el-icon style="vertical-align: middle">
<Search />
</el-icon>
<span style="vertical-align: middle"> Search </span>
</el-button>
</template>
con la clase extra is-loading, su icono será capaz de rotar 360 grados en 2 segundos, también puede anular esto
Usando el icono SVG directamente
<template>
<div style="font-size: 20px">
<!-- Since svg icons do not carry any attributes by default -->
<!-- You need to provide attributes directly -->
<Edit style="width: 1em; height: 1em; margin-right: 8px" />
<Share style="width: 1em; height: 1em; margin-right: 8px" />
<Delete style="width: 1em; height: 1em; margin-right: 8px" />
<Search style="width: 1em; height: 1em; margin-right: 8px" />
</div>
</template>
Colección de iconos
TIP
Puede usar el icono SVG en cualquier versión siempre y cuando lo instale
Puede hacer clic en el icono para copiarlo
API
Atributos
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| color | Atributo de relleno de la etiqueta SVG | string | inherit from color |
| size | Tamaño del icono SVG. tamaño x tamaño | number / string | inherit from font size |
Slots
| Nombre | Descripción |
|---|---|
| default | personaliza el contenido por defecto |
三咲智子
jeremywu
云游君
btea
qiang
赵添
Xc
zhangenming
류한경
Delyan Haralanov
M5 Universe
zwgwf
on the field of hope
zazzaz
Hades-li
dopamine
basonwoo
Kevin.Liao
iamkun
Wisdom
kooriookami