Icon

Icon

출처: 문서

본문

Element Plus는 일련의 공통 아이콘 세트를 제공해요. 아이콘은 모두 SVG 기반이며 크기와 색상을 쉽게 조절할 수 있어요.

아이콘 사용 (Icon Usage)

• 예시처럼 바로 사용하려면, 사용하기 전에 컴포넌트를 전역으로 등록해야 해요.
• 사용 가능한 모든 SVG 아이콘을 보려면 @element-plus/icons-vue@latest와 소스인 element-plus-icons 또는 Icon Collection을 확인해 주세요.

설치 (Installation)

패키지 매니저 사용 (Using packaging manager)

좋아하는 패키지 매니저를 선택해요.

$ npm install @element-plus/icons-vue

$ yarn add @element-plus/icons-vue

$ pnpm install @element-plus/icons-vue

모든 아이콘 등록 (Register All Icons)

@element-plus/icons-vue에서 모든 아이콘을 import 해 전역으로 등록해야 해요.

// 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)
}

이 템플릿도 참고할 수 있어요.

브라우저에서 가져오기 (Import in Browser)

브라우저의 HTML 태그로 Element Plus Icons를 직접 가져오고, 전역 변수 ElementPlusIconsVue를 사용해요. CDN 공급자에 따라 도입 방법이 달라요. 여기서는 unpkg와 jsDelivr를 예시로 들어요. 다른 CDN 공급자도 사용할 수 있어요.

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

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

TIP

Element Plus CDN을 사용하는 사용자에게는 링크 주소에 버전을 고정(lock)할 것을 권장해요. 그래야 나중에 Element Plus가 업그레이드될 때 호환되지 않는 업데이트의 영향을 받지 않아요. 버전을 고정하는 방법은 unpkg.com에서 확인해 주세요.

자동 임포트 (Auto Import)

unplugin-icons와 unplugin-auto-import를 사용해 iconify의 모든 아이콘 컬렉션을 자동으로 import 할 수 있어요. 이 템플릿을 참고하세요.

간단한 사용 (Simple Usage)

WARNING

HTML 표준에 이미 menu라는 이름의 태그가 정의돼 있기 때문에, 아이콘을 렌더링하려면 별명(alias)을 사용해야 해요. Menu를 직접 등록하면 동작하지 않아요.

<template>
  <div class="icon-demo">
    <el-icon><Edit /></el-icon>
  </div>
</template>

el-icon과 결합 (Combined with el-icon)

el-icon은 원시 SVG 아이콘에 추가 속성을 제공해요. 자세한 내용은 끝까지 읽어 보세요. 예를 들어 is-loading 클래스를 추가하면 아이콘이 2초에 360도 회전해요. 이 동작도 오버라이드할 수 있어요.

<template>
  <div>
    <el-icon :size="20">
      <Search />
    </el-icon>
    <el-icon class="is-loading">
      <Loading />
    </el-icon>
  </div>
</template>

SVG 아이콘 직접 사용 (Using SVG icon directly)

@element-plus/icons-vue의 SVG 컴포넌트는 fill과 size를 받는 props를 전달해 직접 렌더링할 수도 있어요.

<template>
  <edit style="width: 1em; height: 1em; margin-right: 8px" />
  <share style="width: 1em; height: 1em; margin-right: 8px" />
</template>

아이콘 컬렉션 (Icon Collection)

TIP

어떤 버전이든 SVG 아이콘을 설치만 하면 사용할 수 있어요. 아이콘을 클릭해 복사할 수 있어요.

제공되는 아이콘 이름 예시는 다음과 같아요.

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

Name	Description	Type	Default
color	SVG tag's fill attribute	string	inherit from color
size	SVG icon size, size x size	number / string	inherit from font size

Slots

Name	Description
default	Customize default content

더 알아보기 (Learn more)