vue element plus Icon 图标

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

使用图标#

• 如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。
  
• 如若需要查看所有可用的 SVG 图标请查阅 @element-plus/icons-vue@1.x@element-plus/icons-vue@latest 和有关 Icon Collection 的源码 element-plus-icons
  

安装#

使用包管理器#

# 选择一个你喜欢的包管理器
# 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 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 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-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板。

基础用法#

WARNING

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

<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <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-vue，就可以在任意版本里使用 SVG 图标。

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

Copy SVG contentCopy 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#

Attributes#

Slots#

源代码#

组件 • 文档