메뉴
Icon component for displaying SVG icons. Invoke when user needs to display icons, customize icon sizes and colors, or use Element Plus icon collection.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Element Plus Skills Library - A comprehensive skill library for AI agents to understand and utilize Element Plus UI components. Invoke when user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.
Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.
Alert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.
Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.
Autocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.
Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.
| name | el-icon |
| description | Icon component for displaying SVG icons. Invoke when user needs to display icons, customize icon sizes and colors, or use Element Plus icon collection. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Icon component provides SVG icons with customizable size and color.
npm install @element-plus/icons-vue
<template>
<el-icon :size="30" :color="color">
<Edit />
</el-icon>
</template>
<script setup>
import { ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'
const color = ref('#409EFC')
</script>
<template>
<el-button type="primary">
<el-icon style="vertical-align: middle;">
<Search />
</el-icon>
<span style="vertical-align: middle;">Search</span>
</el-button>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
</script>
<template>
<el-icon class="is-loading">
<Loading />
</el-icon>
</template>
<script setup>
import { Loading } from '@element-plus/icons-vue'
</script>
<template>
<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;" />
</template>
<script setup>
import { Edit, Share, Delete } from '@element-plus/icons-vue'
</script>
// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
| Name | Description | Type | Default |
|---|---|---|---|
| color | SVG fill color | string | inherit from parent |
| size | Icon size | number | string | inherit from font size |
| Name | Description |
|---|---|
| default | SVG icon component |
Element Plus provides 300+ icons including:
el-icon wrapper for consistent sizingis-loading class for loading animations