vue element plus Icon 图标

简介: vue element plus 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 无法正常工作,您需要使用别名来渲染图标。

<!-- 使用 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#

属性名 说明 类型 默认值
color svg 的 fill 颜色 string 继承颜色
size SVG 图标的大小,size x size number / string 继承字体大小

Slots#

名称 说明
default 自定义默认内容

源代码#

组件文档

相关文章
|
1天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
53 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
2天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
4天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
10天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
11 3
|
4天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
16 2
|
4天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
13 2