mirror of
https://github.com/element-plus/element-plus.git
synced 2025-04-12 16:40:36 +08:00
docs: icons categories and update icon-vue package (#9286)
* docs(components): [icon] categories
This commit is contained in:
Xc
GitHub
parent
4cb16a4f7e
commit
24490e919b
@ -0,0 +1,332 @@
|
||||
{
|
||||
"categories": [
|
||||
{
|
||||
"name": "System",
|
||||
"items": [
|
||||
"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"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Arrow",
|
||||
"items": [
|
||||
"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"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Document",
|
||||
"items": [
|
||||
"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"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Media",
|
||||
"items": [
|
||||
"Microphone",
|
||||
"Mute",
|
||||
"Mic",
|
||||
"VideoPause",
|
||||
"VideoCamera",
|
||||
"VideoPlay",
|
||||
"Headset",
|
||||
"Monitor",
|
||||
"Film",
|
||||
"Camera",
|
||||
"Picture",
|
||||
"PictureRounded",
|
||||
"Iphone",
|
||||
"Cellphone",
|
||||
"VideoCameraFilled",
|
||||
"PictureFilled",
|
||||
"Platform",
|
||||
"CameraFilled",
|
||||
"BellFilled"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Traffic",
|
||||
"items": [
|
||||
"Location",
|
||||
"LocationInformation",
|
||||
"DeleteLocation",
|
||||
"Coordinate",
|
||||
"Bicycle",
|
||||
"OfficeBuilding",
|
||||
"School",
|
||||
"Guide",
|
||||
"AddLocation",
|
||||
"MapLocation",
|
||||
"Place",
|
||||
"LocationFilled",
|
||||
"Van"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Food",
|
||||
"items": [
|
||||
"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"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Items",
|
||||
"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",
|
||||
"Discount",
|
||||
"TakeawayBox",
|
||||
"PriceTag",
|
||||
"Wallet",
|
||||
"Opportunity",
|
||||
"PhoneFilled",
|
||||
"WalletFilled",
|
||||
"GoodsFilled",
|
||||
"Flag",
|
||||
"BrushFilled",
|
||||
"Briefcase",
|
||||
"Stamp"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Weather",
|
||||
"items": [
|
||||
"Sunrise",
|
||||
"Sunny",
|
||||
"Ship",
|
||||
"MostlyCloudy",
|
||||
"PartlyCloudy",
|
||||
"Sunset",
|
||||
"Sunrise",
|
||||
"Drizzling",
|
||||
"Pouring",
|
||||
"Cloudy",
|
||||
"Moon",
|
||||
"MoonNight",
|
||||
"Lightning"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -5,6 +5,13 @@ import { ElMessage } from 'element-plus'
|
||||
import * as Icons from '@element-plus/icons-vue'
|
||||
import { useLang } from '../../composables/lang'
|
||||
import localeData from '../../../i18n/component/icons.json'
|
||||
import IconCategories from './icons-categories.json'
|
||||
import type { DefineComponent } from 'vue'
|
||||
|
||||
type CategoriesItem = {
|
||||
name: string
|
||||
icons: DefineComponent[]
|
||||
}
|
||||
|
||||
const lang = useLang()
|
||||
const locale = computed(() => localeData[lang.value])
|
||||
@ -36,6 +43,26 @@ const copySvgIcon = async (name, refs) => {
|
||||
await copyContent(content)
|
||||
}
|
||||
}
|
||||
|
||||
const categories = ref<CategoriesItem[]>([])
|
||||
const iconMap = new Map(Object.entries(Icons))
|
||||
|
||||
IconCategories.categories.forEach((o) => {
|
||||
const result: CategoriesItem = {
|
||||
name: o.name,
|
||||
icons: [],
|
||||
}
|
||||
o.items.forEach((i) => {
|
||||
const icon = iconMap.get(i)
|
||||
if (icon) {
|
||||
result.icons.push(icon)
|
||||
iconMap.delete(i)
|
||||
}
|
||||
})
|
||||
categories.value.push(result)
|
||||
})
|
||||
|
||||
categories.value.push({ name: 'Other', icons: Array.from(iconMap.values()) })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -46,61 +73,77 @@ const copySvgIcon = async (name, refs) => {
|
||||
inactive-text="Copy SVG content"
|
||||
/>
|
||||
</div>
|
||||
<ul class="demo-icon-list">
|
||||
<li
|
||||
v-for="component in Icons"
|
||||
:key="component.name"
|
||||
:ref="component.name"
|
||||
class="icon-item"
|
||||
@click="copySvgIcon(component.name, $refs)"
|
||||
>
|
||||
<span class="demo-svg-icon">
|
||||
<ElIcon :size="20">
|
||||
<component :is="component" />
|
||||
</ElIcon>
|
||||
<span class="icon-name">{{ component.name }}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-for="item in categories" :key="item.name" class="demo-icon-item">
|
||||
<div class="demo-icon-title">{{ item.name }}</div>
|
||||
<ul class="demo-icon-list">
|
||||
<li
|
||||
v-for="component in item.icons"
|
||||
:key="component.name"
|
||||
:ref="component.name"
|
||||
class="icon-item"
|
||||
@click="copySvgIcon(component.name, $refs)"
|
||||
>
|
||||
<span class="demo-svg-icon">
|
||||
<ElIcon :size="20">
|
||||
<component :is="component" />
|
||||
</ElIcon>
|
||||
<span class="icon-name">{{ component.name }}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.demo-icon-list {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0 !important;
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
border-left: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
.demo-icon {
|
||||
&-item {
|
||||
margin-top: 24px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
&-list {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0 !important;
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
border-left: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
color: var(--el-text-color-regular);
|
||||
height: 90px;
|
||||
font-size: 13px;
|
||||
border-right: 1px solid var(--el-border-color);
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
transition: background-color var(--el-transition-duration);
|
||||
&:hover {
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
.el-icon {
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
color: var(--el-text-color-regular);
|
||||
height: 90px;
|
||||
font-size: 13px;
|
||||
border-right: 1px solid var(--el-border-color);
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
transition: background-color var(--el-transition-duration);
|
||||
&:hover {
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
.el-icon {
|
||||
color: var(--brand-color-light);
|
||||
}
|
||||
color: var(--brand-color-light);
|
||||
}
|
||||
color: var(--brand-color-light);
|
||||
}
|
||||
|
||||
.demo-svg-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
.demo-svg-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-name {
|
||||
margin-top: 8px;
|
||||
.icon-name {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@docsearch/js": "^3.1.0",
|
||||
"@element-plus/icons-vue": "^2.0.6",
|
||||
"@element-plus/icons-vue": "^2.0.9",
|
||||
"@element-plus/metadata": "workspace:*",
|
||||
"@vue/shared": "^3.2.37",
|
||||
"@vueuse/core": "^8.7.5",
|
||||
|
||||
23
pnpm-lock.yaml
generated
23
pnpm-lock.yaml
generated
@ -161,7 +161,7 @@ importers:
|
||||
'@element-plus/build': workspace:*
|
||||
'@element-plus/build-constants': workspace:*
|
||||
'@element-plus/build-utils': workspace:*
|
||||
'@element-plus/icons-vue': ^2.0.6
|
||||
'@element-plus/icons-vue': ^2.0.9
|
||||
'@element-plus/metadata': workspace:*
|
||||
'@iconify-json/ri': ^1.1.3
|
||||
'@types/markdown-it': ^12.2.3
|
||||
@ -195,13 +195,13 @@ importers:
|
||||
vue: ^3.2.37
|
||||
dependencies:
|
||||
'@docsearch/js': 3.1.0
|
||||
'@element-plus/icons-vue': 2.0.6_vue@3.2.37
|
||||
'@element-plus/icons-vue': 2.0.9_vue@3.2.37
|
||||
'@element-plus/metadata': link:../internal/metadata
|
||||
'@vue/shared': 3.2.37
|
||||
'@vueuse/core': 8.7.5_vue@3.2.37
|
||||
axios: 0.27.2
|
||||
clipboard-copy: 4.0.1
|
||||
element-plus: 2.2.9_vue@3.2.37
|
||||
element-plus: 2.2.12_vue@3.2.37
|
||||
markdown-it: 13.0.1
|
||||
normalize.css: 8.0.1
|
||||
nprogress: 0.2.0
|
||||
@ -1966,6 +1966,14 @@ packages:
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
/@element-plus/icons-vue/2.0.9_vue@3.2.37:
|
||||
resolution: {integrity: sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
/@esbuild-kit/cjs-loader/2.2.1:
|
||||
resolution: {integrity: sha512-pq2Z4DcqTBF7y1wQuIzFVqmHJVnmP6hgHEWN2ubPjeG7OzXMZ9NvozW+YA/MIeMdZWp1jcJ/EvXk2+mfEKoCDQ==}
|
||||
dependencies:
|
||||
@ -4818,8 +4826,8 @@ packages:
|
||||
engines: {node: '>=10'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
is-text-path: 1.0.1
|
||||
JSONStream: 1.3.5
|
||||
is-text-path: 1.0.1
|
||||
lodash: 4.17.21
|
||||
meow: 8.1.2
|
||||
split2: 3.2.2
|
||||
@ -5241,13 +5249,13 @@ packages:
|
||||
/electron-to-chromium/1.4.147:
|
||||
resolution: {integrity: sha512-czclPqxLMPqPMkahKcske4TaS5lcznsc26ByBlEFDU8grTBVK9C5W6K9I6oEEhm4Ai4jTihGnys90xY1yjXcRg==}
|
||||
|
||||
/element-plus/2.2.9_vue@3.2.37:
|
||||
resolution: {integrity: sha512-jYbL0JkCdv95rkT6trZJjCAizLPySa0qcd2cgq+57SKQnCZAcNDDq4GbTuFRnNavdoeCJnuM3HIficTIUpsMOQ==}
|
||||
/element-plus/2.2.12_vue@3.2.37:
|
||||
resolution: {integrity: sha512-g/hIHj3b+dND2R3YRvyvCJtJhQvR7lWvXqhJaoxaQmajjNWedoe4rttxG26fOSv9YCC2wN4iFDcJHs70YFNgrA==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
'@ctrl/tinycolor': 3.4.1
|
||||
'@element-plus/icons-vue': 2.0.6_vue@3.2.37
|
||||
'@element-plus/icons-vue': 2.0.9_vue@3.2.37
|
||||
'@floating-ui/dom': 0.5.4
|
||||
'@popperjs/core': /@sxzz/popperjs-es/2.11.7
|
||||
'@types/lodash': 4.14.182
|
||||
@ -11033,6 +11041,7 @@ packages:
|
||||
- rollup
|
||||
- vite
|
||||
- webpack
|
||||
dev: false
|
||||
|
||||
/unplugin/0.6.3:
|
||||
resolution: {integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user