Icon 图标

Element Plus 提供了一套常用的图标集合。

使用图标

安装

使用包管理器

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

注册所有图标

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts

// 如果您正在使用CDN引入,请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

您也可以参考 此模板

浏览器直接引入

直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlusIconsVue了。

根据不同的 CDN 提供商有不同的引入方式, 根据不同的 CDN 提供商有不同的引入方式, 我们在这里以 unpkgjsDelivr 举例。 你也可以使用其它的 CDN 供应商。

unpkg

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

jsDelivr

<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>

TIP

我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本,以免将来 Element Plus 升级时受到非兼容性更新的影响。 锁定版本的方法请查看 unpkg.com

自动导入

使用 unplugin-iconsunplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板

基础用法

WARNING

因为 HTML 标准已经定义了一个名为 menu 的标签, 如果您注册的 menu 无法正常工作,您需要使用别名来渲染图标。

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

结合 el-icon 使用

el-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。

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

通过添加额外的类名 is-loading,你的图标就可以在 2 秒内旋转 360 度,当然你也可以自己改写想要的动画。

直接使用 SVG 图标

<template>
  <div style="font-size: 20px">
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <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>

图标集合

TIP

只要你安装了 @element-plus/icons,**就可以在任意版本里使用 SVG 图标 **。

您可以点击图标复制代码。

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

Icon 属性

属性说明类型可选值默认值
colorsvg 的 fill 颜色Pick<CSSProperties, 'color'>-inherit
sizeSVG 图标的大小,size x sizenumber/string-

Icon 插槽

名称说明
自定义默认内容

源代码

组件文档

贡献者