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

shell

# 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

html

<script src="//unpkg.com/@element-plus/icons-vue"></script>

jsDelivr

html

<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á.

vue

<!-- 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.

vue

<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

vue

<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

Copy icon code

System

Plus
Minus
CirclePlus
Search
Female
Male
Aim
House
FullScreen
Loading
Link
Service
Pointer
Star
Notification
Connection
ChatDotRound
Setting
Clock
Position
Discount
Odometer
ChatSquare
ChatRound
ChatLineRound
ChatLineSquare
ChatDotSquare
View
Hide
Unlock
Lock
RefreshRight
RefreshLeft
Refresh
Bell
MuteNotification
User
Check
CircleCheck
Warning
CircleClose
Close
PieChart
More
Compass
Filter
Switch
Select
SemiSelect
CloseBold
EditPen
Edit
Message
MessageBox
TurnOff
Finished
Delete
Crop
SwitchButton
Operation
Open
Remove
ZoomOut
ZoomIn
InfoFilled
CircleCheckFilled
SuccessFilled
WarningFilled
CircleCloseFilled
QuestionFilled
WarnTriangleFilled
UserFilled
MoreFilled
Tools
HomeFilled
Menu
UploadFilled
Avatar
HelpFilled
Share
StarFilled
Comment
Histogram
Grid
Promotion
DeleteFilled
RemoveFilled
CirclePlusFilled

Arrow

ArrowLeft
ArrowUp
ArrowRight
ArrowDown
ArrowLeftBold
ArrowUpBold
ArrowRightBold
ArrowDownBold
DArrowRight
DArrowLeft
Download
Upload
Top
Bottom
Back
Right
TopRight
TopLeft
BottomRight
BottomLeft
Sort
SortUp
SortDown
Rank
CaretLeft
CaretTop
CaretRight
CaretBottom
DCaret
Expand
Fold

Document

DocumentAdd
Document
Notebook
Tickets
Memo
Collection
Postcard
ScaleToOriginal
SetUp
DocumentDelete
DocumentChecked
DataBoard
DataAnalysis
CopyDocument
FolderChecked
Files
Folder
FolderDelete
FolderRemove
FolderOpened
DocumentCopy
DocumentRemove
FolderAdd
FirstAidKit
Reading
DataLine
Management
Checked
Ticket
Failed
TrendCharts
List

Media

Microphone
Mute
Mic
VideoPause
VideoCamera
VideoPlay
Headset
Monitor
Film
Camera
Picture
PictureRounded
Iphone
Cellphone
VideoCameraFilled
PictureFilled
Platform
CameraFilled
BellFilled

Traffic

Location
LocationInformation
DeleteLocation
Coordinate
Bicycle
OfficeBuilding
School
Guide
AddLocation
MapLocation
Place
LocationFilled
Van

Food

Watermelon
Pear
NoSmoking
Smoking
Mug
GobletSquareFull
GobletFull
KnifeFork
Sugar
Bowl
MilkTea
Lollipop
Coffee
Chicken
Dish
IceTea
ColdDrink
CoffeeCup
DishDot
IceDrink
IceCream
Dessert
IceCreamSquare
ForkSpoon
IceCreamRound
Food
HotWater
Grape
Fries
Apple
Burger
Goblet
GobletSquare
Orange
Cherry

Items

Printer
Calendar
CreditCard
Box
Money
Refrigerator
Cpu
Football
Brush
Suitcase
SuitcaseLine
Umbrella
AlarmClock
Medal
GoldMedal
Present
Mouse
Watch
QuartzWatch
Magnet
Help
Soccer
ToiletPaper
ReadingLamp
Paperclip
MagicStick
Basketball
Baseball
Coin
Goods
Sell
SoldOut
Key
ShoppingCart
ShoppingCartFull
ShoppingTrolley
Phone
Scissor
Handbag
ShoppingBag
Trophy
TrophyBase
Stopwatch
Timer
CollectionTag
TakeawayBox
PriceTag
Wallet
Opportunity
PhoneFilled
WalletFilled
GoodsFilled
Flag
BrushFilled
Briefcase
Stamp

Weather

Sunrise
Sunny
Ship
MostlyCloudy
PartlyCloudy
Sunset
Drizzling
Pouring
Cloudy
Moon
MoonNight
Lightning

Other

ChromeFilled
Eleme
ElemeFilled
ElementPlus
Shop
SwitchFilled
WindPower

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

Fuente

Componentes • Style • Documentación

Contribuidores

Layout Container

Layout

Icon ​

Uso de iconos ​

Instalación ​

Usando gestor de paquetes ​

Registrar todos los iconos ​

Importar en el navegador ​

unpkg ​

jsDelivr ​

Auto Importar ​

Uso simple ​

Combinado con el-icon ​

Usando el icono SVG directamente ​

Colección de iconos ​

API ​

Atributos ​

Slots ​

Fuente ​

Contribuidores ​