GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #48 from Lsq128/main

Browse Source 
feat(projects): 添加SvgIcon,配置vite plugin
This commit is contained in:
Soybean 2022-02-25 21:58:03 +08:00 committed by GitHub
commit 1a9efee591
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 1121 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/plugins/index.ts
View File

@ -5,9 +5,10 @@ import iconify from './iconify';
import windicss from './windicss';
import mock from './mock';
import visualizer from './visualizer';
import svgSprite from './svgSprite';
export function setupVitePlugins(configEnv: ConfigEnv): (PluginOption | PluginOption[])[] {
const plugins = [vue, html(configEnv), ...iconify, windicss, mock];
const plugins = [vue, html(configEnv), ...iconify, windicss, mock, svgSprite];
if (configEnv.command === 'build') {
plugins.push(visualizer);

7
build/plugins/svgSprite.ts Normal file
View File

@ -0,0 +1,7 @@
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
symbolId: 'icon-[dir]-[name]'
});

1
package.json
View File

@ -87,6 +87,7 @@
"vite": "2.8.4",
"vite-plugin-html": "^3.0.6",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-windicss": "^1.7.1",
"vue-tsc": "^0.32.0",
"vueuc": "^0.4.26",

1025
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

1
src/assets/svg/activity.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

1
src/assets/svg/at-sign.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-at-sign"><circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 322 B

1
src/assets/svg/cast.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cast"><path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path><line x1="2" y1="20" x2="2.01" y2="20"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

1
src/assets/svg/chrome.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chrome"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

1
src/assets/svg/copy.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

1
src/assets/svg/corner-down-left.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-left"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 314 B

1
src/assets/svg/corner-down-right.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right"><polyline points="15 10 20 15 15 20"></polyline><path d="M4 4v7a4 4 0 0 0 4 4h12"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

1
src/assets/svg/corner-left-down.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-left-down"><polyline points="14 15 9 20 4 15"></polyline><path d="M20 4h-7a4 4 0 0 0-4 4v12"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 317 B

1
src/assets/svg/corner-left-up.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-left-up"><polyline points="14 9 9 4 4 9"></polyline><path d="M20 20h-7a4 4 0 0 1-4-4V4"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 312 B

1
src/assets/svg/corner-right-down.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-right-down"><polyline points="10 15 15 20 20 15"></polyline><path d="M4 4h7a4 4 0 0 1 4 4v12"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

1
src/assets/svg/corner-right-up.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-right-up"><polyline points="10 9 15 4 20 9"></polyline><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

1
src/assets/svg/corner-up-left.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-left"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 312 B

1
src/assets/svg/corner-up-right.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 316 B

1
src/assets/svg/heart.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 371 B

1
src/assets/svg/linkedin.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

1
src/assets/svg/slack.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slack"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 999 B

1
src/assets/svg/twitter.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 408 B

1
src/assets/svg/wind.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wind"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

1
src/assets/svg/zap.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

44
src/components/svg/SvgIcon.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<svg :style="svgStyle" class="svg-icon" aria-hidden="true">
<use :xlink:href="symbolId" :fill="fill" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
prefix: {
type: String,
default: 'icon'
},
name: {
type: String,
required: true
},
size: {
type: [String, Number],
default: 30
},
color: {
type: String,
default: ''
}
});
const svgStyle = computed(() => {
const { size } = props;
let s = `${size}`;
s = `${s.replace('px', '')}px`;
return {
width: s,
height: s
};
});
const fill = computed(() => props.color || 'currentColor');
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>
<style scoped>
.svg-icon {
vertical-align: -0.15em;
overflow: hidden;
}
</style>

3
src/components/svg/index.ts
View File

@ -4,5 +4,6 @@ import SvgServiceError from './SvgServiceError.vue';
import SvgEmptyData from './SvgEmptyData.vue';
import SvgNetworkError from './SvgNetworkError.vue';
import SvgBanner from './SvgBanner.vue';
import SvgIcon from './SvgIcon.vue';
export { SvgNoPermission, SvgNotFound, SvgServiceError, SvgEmptyData, SvgNetworkError, SvgBanner };
export { SvgNoPermission, SvgNotFound, SvgServiceError, SvgEmptyData, SvgNetworkError, SvgBanner, SvgIcon };

1
src/plugins/assets.ts
View File

@ -3,6 +3,7 @@ import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import '../styles/css/global.css';
import 'virtual:svg-icons-register';
/** 引入静态资源(全局引入css、字体等) */
export default function setupAssets() {}

7
src/plugins/svg-icon.ts Normal file
View File

@ -0,0 +1,7 @@
import type { App } from 'vue';
import { SvgIcon } from '@/components';
/** 注册全局svg-icon组件 */
export default function setupNaiveUI(app: App) {
app.component('SvgIcon', SvgIcon);
}

10
src/views/plugin/icon/index.vue
View File

@ -16,6 +16,15 @@
<web-site-link label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
</template>
</n-card>
<n-card title="SvgIcon 示例" class="mt-10px shadow-sm rounded-16px">
<div class="grid grid-cols-10">
<template v-for="item in svgIcons" :key="item">
<div class="mt-5px flex-x-center">
<svg-icon :name="item" />
</div>
</template>
</div>
</n-card>
</div>
</template>
@ -24,6 +33,7 @@ import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { IconSelect, WebSiteLink } from '@/components';
import { icons } from './icons';
import { svgIcons } from './svg-icons';
const selectVal = ref('');
</script>

4
src/views/plugin/icon/svg-icons.ts Normal file
View File

@ -0,0 +1,4 @@
const importSvgIcons = import.meta.glob('../../../assets/svg/**/*.svg');
export const svgIcons = Object.keys(importSvgIcons).map(k => {
return k.split('/svg/')[1].replaceAll('/', '-').replace('.svg', '');
});