第一基础版
This commit is contained in:
19
packages/icons/README.md
Normal file
19
packages/icons/README.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# @vben/icons
|
||||
|
||||
用于多个 `app` 公用的图标文件，继承了 `@vben-core/icons` 的所有能力。业务上有通用图标可以放在这里。
|
||||
|
||||
## 用法
|
||||
|
||||
### 添加依赖
|
||||
|
||||
```bash
|
||||
# 进入目标应用目录，例如 apps/xxxx-app
|
||||
# cd apps/xxxx-app
|
||||
pnpm add @vben/icons
|
||||
```
|
||||
|
||||
### 使用
|
||||
|
||||
```ts
|
||||
import { X } from '@vben/icons';
|
||||
```
|
||||
22
packages/icons/package.json
Normal file
22
packages/icons/package.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "@vben/icons",
|
||||
"version": "5.5.4",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vbenjs/vue-vben-admin.git",
|
||||
"directory": "packages/icons"
|
||||
},
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./src/index.ts",
|
||||
"default": "./src/index.ts"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@vben-core/icons": "workspace:*"
|
||||
}
|
||||
}
|
||||
15
packages/icons/src/iconify/index.ts
Normal file
15
packages/icons/src/iconify/index.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createIconifyIcon } from '@vben-core/icons';
|
||||
|
||||
export * from '@vben-core/icons';
|
||||
|
||||
export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
|
||||
|
||||
export const MdiWechat = createIconifyIcon('mdi:wechat');
|
||||
|
||||
export const MdiGithub = createIconifyIcon('mdi:github');
|
||||
|
||||
export const MdiGoogle = createIconifyIcon('mdi:google');
|
||||
|
||||
export const MdiQqchat = createIconifyIcon('mdi:qqchat');
|
||||
|
||||
export const MdiArrowLeft = createIconifyIcon('mdi:arrow-left');
|
||||
27
packages/icons/src/icons/empty-icon.vue
Normal file
27
packages/icons/src/icons/empty-icon.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<svg
|
||||
height="41"
|
||||
viewBox="0 0 64 41"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(0 1)">
|
||||
<ellipse
|
||||
cx="32"
|
||||
cy="33"
|
||||
fill="hsl(var(--background-deep))"
|
||||
rx="32"
|
||||
ry="7"
|
||||
/>
|
||||
<g fill-rule="nonzero" stroke="hsl(var(--heavy))">
|
||||
<path
|
||||
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
|
||||
/>
|
||||
<path
|
||||
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
|
||||
fill="hsl(var(--accent))"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
3
packages/icons/src/index.ts
Normal file
3
packages/icons/src/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './iconify';
|
||||
export { default as EmptyIcon } from './icons/empty-icon.vue';
|
||||
export * from './svg';
|
||||
29
packages/icons/src/svg/icons/antdv-logo.svg
Normal file
29
packages/icons/src/svg/icons/antdv-logo.svg
Normal file
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Vue</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#29CDFF" offset="0%"></stop>
|
||||
<stop stop-color="#148EFF" offset="37.8600687%"></stop>
|
||||
<stop stop-color="#0A60FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
|
||||
<stop stop-color="#29CDFF" offset="0%"></stop>
|
||||
<stop stop-color="#0F78FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
|
||||
<stop stop-color="#FA8E7D" offset="0%"></stop>
|
||||
<stop stop-color="#F74A5C" offset="51.2635191%"></stop>
|
||||
<stop stop-color="#F51D2C" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group" transform="translate(19.000000, 9.000000)">
|
||||
<path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
|
||||
<path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
|
||||
<path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
1
packages/icons/src/svg/icons/avatar-1.svg
Normal file
1
packages/icons/src/svg/icons/avatar-1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 23 KiB |
1
packages/icons/src/svg/icons/avatar-2.svg
Normal file
1
packages/icons/src/svg/icons/avatar-2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
1
packages/icons/src/svg/icons/avatar-3.svg
Normal file
1
packages/icons/src/svg/icons/avatar-3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 32 KiB |
1
packages/icons/src/svg/icons/avatar-4.svg
Normal file
1
packages/icons/src/svg/icons/avatar-4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
1
packages/icons/src/svg/icons/bell.svg
Normal file
1
packages/icons/src/svg/icons/bell.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.23 419.23"><defs><style>.svg-bell-cls-1{fill:#fbc907;}.svg-bell-cls-2{fill:#f3a70f;}.svg-bell-cls-3{fill:#426572;}.svg-bell-cls-4,.svg-bell-cls-9{fill:#fff;}.svg-bell-cls-5{fill:#e8e8e8;}.svg-bell-cls-6{fill:#dadada;}.svg-bell-cls-7{opacity:0.1;}.svg-bell-cls-8{fill:#55e0ff;}.svg-bell-cls-9{opacity:0.4;}</style></defs><title>Asset 510</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="svg-bell-cls-1" cx="210.66" cy="209.62" r="203.61"/><path class="svg-bell-cls-2" d="M27.21,209.62A203.61,203.61,0,0,1,220.72,6.26q-5-.25-10.08-.25C98.19,4.86,6.11,95.09,5,207.54S94.05,412.07,206.5,413.21q2.07,0,4.13,0,5.06,0,10.08-.25A203.61,203.61,0,0,1,27.21,209.62Z"/><path class="svg-bell-cls-3" d="M209.61,419.23C94,419.23,0,325.19,0,209.61S94,0,209.61,0,419.23,94,419.23,209.61,325.19,419.23,209.61,419.23Zm0-407.23C100.65,12,12,100.65,12,209.61s88.65,197.61,197.61,197.61,197.61-88.65,197.61-197.61S318.58,12,209.61,12Z"/><path class="svg-bell-cls-4" d="M111.69,60.1a195,195,0,0,1,41.08-21.2c3.59-1.34,2-7.14-1.6-5.79a201.47,201.47,0,0,0-42.51,21.8c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="svg-bell-cls-4" d="M35.09,160.61c3.09-10.2,8-20,13.05-29.32A212.37,212.37,0,0,1,95.87,72.18c2.93-2.52-1.33-6.75-4.24-4.24A217.08,217.08,0,0,0,43,128.26C37.63,138,32.54,148.34,29.31,159c-1.12,3.7,4.67,5.29,5.79,1.6Z"/><circle class="svg-bell-cls-5" cx="211.45" cy="212.12" r="156.89"/><path class="svg-bell-cls-6" d="M67.05,232.07a156.89,156.89,0,0,1,283.33-92.82A156.91,156.91,0,1,0,85,304.92,156.19,156.19,0,0,1,67.05,232.07Z"/><path class="svg-bell-cls-5" d="M211.32,152.25h0a9.16,9.16,0,0,1,9.16,9.16V210.5a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V161.41A9.16,9.16,0,0,1,211.32,152.25Z"/><circle class="svg-bell-cls-5" cx="211.14" cy="221.32" r="15.94"/><path class="svg-bell-cls-3" d="M210.48,92.62c6.29,0,6.29-9.77,0-9.77S204.19,92.62,210.48,92.62Z"/><path class="svg-bell-cls-3" d="M210.48,343.89c6.29,0,6.29-9.77,0-9.77S204.19,343.89,210.48,343.89Z"/><path class="svg-bell-cls-3" d="M339.84,218.25c6.29,0,6.29-9.77,0-9.77S333.55,218.25,339.84,218.25Z"/><path class="svg-bell-cls-3" d="M81.13,218.25c6.29,0,6.29-9.77,0-9.77S74.84,218.25,81.13,218.25Z"/><path class="svg-bell-cls-3" d="M205.56,153.32h0a9.16,9.16,0,0,1,9.16,9.16v49.09a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V162.49A9.16,9.16,0,0,1,205.56,153.32Z"/><circle class="cls-3" cx="205.38" cy="221.15" r="15.94"/><path class="cls-3" d="M135.78,272.58l135.16-89.89L290.11,170c5.22-3.46.33-11.94-4.92-8.44L150,251.4l-19.17,12.74C125.64,267.6,130.52,276.08,135.78,272.58Z"/><g class="svg-bell-cls-7"><ellipse class="svg-bell-cls-8" cx="210.2" cy="211.21" rx="156.89" ry="154.23"/></g><path class="svg-bell-cls-9" d="M243.13,60.17,84.37,301.88a162.18,162.18,0,0,1-18.58-47.29L193.5,60.21a153.88,153.88,0,0,1,49.67,0Z"/><path class="svg-bell-cls-9" d="M289.69,72.6,115.93,325.78a155.09,155.09,0,0,1-14.77-15L270,64.76A155.38,155.38,0,0,1,289.69,72.6Z"/><path class="svg-bell-cls-9" d="M362.16,171.75h0L232.51,360.68h0a160.93,160.93,0,0,1-42.54.43L346.63,132.84A151.63,151.63,0,0,1,362.16,171.75Z"/><path class="cls-3" d="M210.12,369.75c-89.82,0-162.89-71.88-162.89-160.23S120.31,49.29,210.12,49.29,373,121.17,373,209.52,299.94,369.75,210.12,369.75Zm0-308.46c-83.2,0-150.89,66.5-150.89,148.23s67.69,148.23,150.89,148.23S361,291.25,361,209.52,293.32,61.29,210.12,61.29Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
1
packages/icons/src/svg/icons/cake.svg
Normal file
1
packages/icons/src/svg/icons/cake.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.49 390.69"><defs><style>.svg-cake-cls-1{fill:#fff;}.svg-cake-cls-2{fill:#f3aa9f;}.svg-cake-cls-3{fill:#e1978f;}.svg-cake-cls-4,.svg-cake-cls-6{fill:#426572;}.svg-cake-cls-5{fill:#e1d2d5;}.svg-cake-cls-6{font-size:100.43px;font-family:Dosis-ExtraBold, Dosis;font-weight:700;}</style></defs><title>Asset 480</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="svg-cake-cls-1" d="M383.9,162H199.69V2.19q4-.19,8.16-.19A176.87,176.87,0,0,1,383.9,162Z"/><path class="svg-cake-cls-2" d="M355.38,210a176.83,176.83,0,0,1-95.72,157.18l-.15.07A176.88,176.88,0,1,1,101.72,50.67l.15-.07a175.93,175.93,0,0,1,72.82-17.4V191H354.37A177.9,177.9,0,0,1,355.38,210Z"/><path class="svg-cake-cls-3" d="M357.53,212.16a176,176,0,0,1-17.44,76.66,1,1,0,0,1-.07.15A176.89,176.89,0,0,1,73.47,352.79l1.23.38q6,1.86,12.26,3.29A177,177,0,0,0,303.49,191h52.78A178.15,178.15,0,0,1,357.53,212.16Z"/><path class="svg-cake-cls-4" d="M182.85,390.69a182.87,182.87,0,0,1-84-345.31l.41-.2a180.59,180.59,0,0,1,75.13-20l6.27-.28V185H364.36l.51,5.44c.54,5.77.82,11.62.82,17.4a180.72,180.72,0,0,1-20.18,83.56c-.06.12-.12.26-.2.41a184.39,184.39,0,0,1-83,80.77l-.18.08,0,0A181.06,181.06,0,0,1,182.85,390.69ZM104.33,56.08A170.88,170.88,0,0,0,256.9,361.85l.17-.08,0,0a172.34,172.34,0,0,0,77.5-75.38l.15-.29a168.84,168.84,0,0,0,18.93-78.23c0-3.6-.11-7.23-.34-10.84H168.69V37.58a168.41,168.41,0,0,0-64.07,18.35Z"/><path class="svg-cake-cls-5" d="M382.9,158H309.11c-2.89-46.4-18.43-98.49-36.89-144.29l1.33.51a177.49,177.49,0,0,1,92.51,83.56A175.63,175.63,0,0,1,382.9,158Z"/><path class="svg-cake-cls-4" d="M392.49,172H195.69V.47L201.4.2C204.11.07,207,0,209.85,0a182.87,182.87,0,0,1,182,165.44Zm-184.8-12H379.18A170.89,170.89,0,0,0,209.85,12h-2.16Z"/><text class="svg-cake-cls-6" transform="translate(232.67 133.93)">%</text><path class="svg-cake-cls-1" d="M101.22,81.14a166.34,166.34,0,0,1,34.83-18c3.58-1.34,2-7.14-1.6-5.79A172.89,172.89,0,0,0,98.19,76c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="svg-cake-cls-1" d="M36.28,166.34c2.62-8.63,6.74-16.94,11.05-24.83A180.58,180.58,0,0,1,87.86,91.34c2.93-2.52-1.33-6.75-4.24-4.24-23.3,20.06-44.07,47.84-53.12,77.65-1.12,3.7,4.67,5.29,5.79,1.6Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
1
packages/icons/src/svg/icons/card.svg
Normal file
1
packages/icons/src/svg/icons/card.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445 271.8"><defs><style>.svg-card-cls-1{fill:#32caf8;}.svg-card-cls-2{fill:#00aaf8;opacity:0.5;}.svg-card-cls-3{fill:#fff;}.svg-card-cls-4{fill:#426572;}</style></defs><g><g><rect class="svg-card-cls-1" x="6" y="8.17" width="433" height="259.8" rx="12" ry="12"/><path class="svg-card-cls-2" d="M439,21.16V255a13,13,0,0,1-13,13H28.72l381-259.8H426A13,13,0,0,1,439,21.16Z"/><path class="svg-card-cls-3" d="M328,33.24h88.92c3.86,0,3.87-6,0-6H328c-3.86,0-3.87,6,0,6Z"/><path class="svg-card-cls-3" d="M283.49,33.24H312.6c3.86,0,3.87-6,0-6H283.49c-3.86,0-3.87,6,0,6Z"/><path class="svg-card-cls-4" d="M427,271.8H18a18,18,0,0,1-18-18V18A18,18,0,0,1,18,0H427a18,18,0,0,1,18,18V253.8A18,18,0,0,1,427,271.8ZM18,12a6,6,0,0,0-6,6V253.8a6,6,0,0,0,6,6H427a6,6,0,0,0,6-6V18a6,6,0,0,0-6-6Z"/><rect class="svg-card-cls-4" x="37.89" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="55.93" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="73.97" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="92.01" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="118.71" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="136.76" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="154.8" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="172.84" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="199.54" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="217.58" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="235.63" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="253.67" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="280.37" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="298.41" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="316.45" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="334.49" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="43.89" y="177.53" width="161.29" height="12"/><rect class="svg-card-cls-4" x="43.89" y="204.59" width="68.2" height="12"/><circle class="svg-card-cls-3" cx="379.46" cy="207.35" r="23.82"/><rect class="svg-card-cls-3" x="43.89" y="36.31" width="72.53" height="47.63" rx="12" ry="12"/><path class="svg-card-cls-4" d="M104.42,88.86H55.89a18,18,0,0,1-18-18V47.23a18,18,0,0,1,18-18h48.53a18,18,0,0,1,18,18V70.86A18,18,0,0,1,104.42,88.86ZM55.89,41.23a6,6,0,0,0-6,6V70.86a6,6,0,0,0,6,6h48.53a6,6,0,0,0,6-6V47.23a6,6,0,0,0-6-6Z"/><path class="svg-card-cls-4" d="M379.46,241.49a29.81,29.81,0,1,1,29.82-29.82A29.85,29.85,0,0,1,379.46,241.49Zm0-47.63a17.81,17.81,0,1,0,17.82,17.81A17.84,17.84,0,0,0,379.46,193.86Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
1
packages/icons/src/svg/icons/download.svg
Normal file
1
packages/icons/src/svg/icons/download.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.99 419.8"><defs><style>.svg-download-cls-1{fill:#ffa546;}.svg-download-cls-2{fill:#ff6059;opacity:0.4;}.svg-download-cls-3{fill:#426572;}.cls-4{fill:#ffd947;}</style></defs><g><g><path class="svg-download-cls-1" d="M351,380.73v17.59a15.52,15.52,0,0,1-15.47,15.48H21.46A15.52,15.52,0,0,1,6,398.32V380.73a15.51,15.51,0,0,1,15.47-15.47H335.52A15.51,15.51,0,0,1,351,380.73Z"/><path class="svg-download-cls-2" d="M351,406.85c0,3.95-7,7.19-15.47,7.19H21.46C13,414,6,410.8,6,406.85V380.73a15.51,15.51,0,0,1,15.47-15.47H37.66l3.44,25.27c0,4,7,7.2,15.47,7.2l283.72,12.44,7.38-2.28Z"/><path class="svg-download-cls-3" d="M335.52,419.8H21.46A21.5,21.5,0,0,1,0,398.32V380.73a21.49,21.49,0,0,1,21.46-21.47H335.52A21.49,21.49,0,0,1,357,380.73v17.59a21.52,21.52,0,0,1-21.46,21.48ZM21.46,371.26A9.48,9.48,0,0,0,12,380.73v17.59a9.48,9.48,0,0,0,9.46,9.48H335.52a9.52,9.52,0,0,0,9.46-9.48V380.73a9.48,9.48,0,0,0-9.46-9.47Z"/><path class="svg-download-cls-1" d="M247.93,138H233.23V41.7A35.7,35.7,0,0,0,197.53,6H159.45a35.7,35.7,0,0,0-35.7,35.7V138H109.06C80,138,61.84,169.48,76.37,194.64l34.72,60.13,30,52c16.6,28.76,58.12,28.76,74.72,0l30-52,34.72-60.13C295.14,169.48,277,138,247.93,138Z"/><path class="svg-download-cls-2" d="M280.62,188l-34.73,60.13-30,52c-11.24,19.46-66.68,32.78-52.52,18.88,60.22-59.12,104.3-182.16,104.3-182.16A37.74,37.74,0,0,1,280.62,188Z"/><path class="cls-4" d="M192.3,6c-.22.23-.42.47-.63.72-38.92,45-18.36,116.49-42.85,170.71-10.14,22.45-29.18,41.51-52.15,49.48L78,194.64C63.52,169.48,81.67,138,110.72,138h14.7V41.7A35.7,35.7,0,0,1,161.12,6Z"/><path class="svg-download-cls-3" d="M178.49,334.39h0a48.64,48.64,0,0,1-42.56-24.57L71.17,197.64A43.75,43.75,0,0,1,109.06,132h8.69V41.7A41.74,41.74,0,0,1,159.45,0h38.09a41.75,41.75,0,0,1,41.7,41.7V132h8.69a43.75,43.75,0,0,1,37.89,65.62L221,309.82A48.64,48.64,0,0,1,178.49,334.39ZM109.06,144a31.75,31.75,0,0,0-27.49,47.62l64.76,112.17a37.14,37.14,0,0,0,64.33,0l64.76-112.17A31.75,31.75,0,0,0,247.92,144H227.23V41.7A29.73,29.73,0,0,0,197.53,12H159.45a29.73,29.73,0,0,0-29.7,29.7V144Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
25
packages/icons/src/svg/index.ts
Normal file
25
packages/icons/src/svg/index.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { createIconifyIcon } from '@vben-core/icons';
|
||||
|
||||
import './load.js';
|
||||
|
||||
const SvgAvatar1Icon = createIconifyIcon('svg:avatar-1');
|
||||
const SvgAvatar2Icon = createIconifyIcon('svg:avatar-2');
|
||||
const SvgAvatar3Icon = createIconifyIcon('svg:avatar-3');
|
||||
const SvgAvatar4Icon = createIconifyIcon('svg:avatar-4');
|
||||
const SvgDownloadIcon = createIconifyIcon('svg:download');
|
||||
const SvgCardIcon = createIconifyIcon('svg:card');
|
||||
const SvgBellIcon = createIconifyIcon('svg:bell');
|
||||
const SvgCakeIcon = createIconifyIcon('svg:cake');
|
||||
const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
|
||||
|
||||
export {
|
||||
SvgAntdvLogoIcon,
|
||||
SvgAvatar1Icon,
|
||||
SvgAvatar2Icon,
|
||||
SvgAvatar3Icon,
|
||||
SvgAvatar4Icon,
|
||||
SvgBellIcon,
|
||||
SvgCakeIcon,
|
||||
SvgCardIcon,
|
||||
SvgDownloadIcon,
|
||||
};
|
||||
61
packages/icons/src/svg/load.ts
Normal file
61
packages/icons/src/svg/load.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import type { IconifyIconStructure } from '@vben-core/icons';
|
||||
|
||||
import { addIcon } from '@vben-core/icons';
|
||||
|
||||
let loaded = false;
|
||||
if (!loaded) {
|
||||
loadSvgIcons();
|
||||
loaded = true;
|
||||
}
|
||||
|
||||
function parseSvg(svgData: string): IconifyIconStructure {
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(svgData, 'image/svg+xml');
|
||||
const svgElement = xmlDoc.documentElement;
|
||||
|
||||
const svgContent = [...svgElement.childNodes]
|
||||
.filter((node) => node.nodeType === Node.ELEMENT_NODE)
|
||||
.map((node) => new XMLSerializer().serializeToString(node))
|
||||
.join('');
|
||||
|
||||
const viewBoxValue = svgElement.getAttribute('viewBox') || '';
|
||||
const [left, top, width, height] = viewBoxValue.split(' ').map((val) => {
|
||||
const num = Number(val);
|
||||
return Number.isNaN(num) ? undefined : num;
|
||||
});
|
||||
|
||||
return {
|
||||
body: svgContent,
|
||||
height,
|
||||
left,
|
||||
top,
|
||||
width,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义的svg图片转化为组件
|
||||
* @example ./svg/avatar.svg
|
||||
* <Icon icon="svg:avatar"></Icon>
|
||||
*/
|
||||
async function loadSvgIcons() {
|
||||
const svgEagers = import.meta.glob('./icons/**', {
|
||||
eager: true,
|
||||
query: '?raw',
|
||||
});
|
||||
|
||||
await Promise.all(
|
||||
Object.entries(svgEagers).map((svg) => {
|
||||
const [key, body] = svg as [string, string | { default: string }];
|
||||
|
||||
// ./icons/xxxx.svg => xxxxxx
|
||||
const start = key.lastIndexOf('/') + 1;
|
||||
const end = key.lastIndexOf('.');
|
||||
const iconName = key.slice(start, end);
|
||||
|
||||
return addIcon(`svg:${iconName}`, {
|
||||
...parseSvg(typeof body === 'object' ? body.default : body),
|
||||
});
|
||||
}),
|
||||
);
|
||||
}
|
||||
6
packages/icons/tsconfig.json
Normal file
6
packages/icons/tsconfig.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"extends": "@vben/tsconfig/web.json",
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user