jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): 引入soybean-admin-tab、去除vite-plugin-svg-icons，用unplugin-icons实现自定义svg的iconify写法、代码优化

Browse Source
This commit is contained in:
Soybean
2022-03-05 01:55:21 +08:00
parent b298af1ddb
commit a1a57a185c
93 changed files with 266 additions and 6700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/plugin/icon/icons.ts
View File

@ -30,3 +30,13 @@ export const icons = [
'ic:baseline-filter-9',
'ic:baseline-filter-9-plus'
];
// const assetsSvg = import.meta.glob('../../../assets/svg/*.svg');
// const PATH_PREFFIX = '../../../assets/svg/';
// const SUFFIX = '.svg';
// const CUSTOM_ICONIFY_PREFFIX = 'custom-';
// export const svgIcons = Object.keys(assetsSvg).map(key => {
// const svgKey = key.replace(PATH_PREFFIX, '').replace(SUFFIX, '');
// return CUSTOM_ICONIFY_PREFFIX + svgKey;
// });

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

@ -10,19 +10,33 @@
</div>
<div class="mt-50px">
<h1 class="mb-20px text-18px font-500">Icon图标选择器</h1>
<icon-select v-model:value="selectVal" :icons="icons" />
<icon-select v-model:value="selectValue" :icons="icons" />
</div>
<template #footer>
<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="pb-12px text-16px">在src/assets下的svg文件，通过在template里面以 icon-custom-{文件名} 渲染</div>
<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" class="text-30px" />
</div>
</template>
<div class="mt-5px flex-x-center">
<icon-custom-activity class="text-30px" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-at-sign class="text-30px text-primary" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-cast class="text-18px text-info" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-chrome class="text-48px text-success" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-copy class="text-30px text-error" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-wind class="text-30px text-warning" />
</div>
</div>
</n-card>
</div>
@ -33,8 +47,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('');
const selectValue = ref('');
</script>
<style scoped></style>

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

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