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): 本地svg动态渲染图标

Browse Source 
ISSUES CLOSED: #61
This commit is contained in:
Soybean
2022-06-16 01:17:31 +08:00
parent 833018a831
commit c3c975ee11
16 changed files with 1067 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,9 +16,9 @@
<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">
<n-card title="自定义图标示例" class="mt-10px shadow-sm rounded-16px">
<div class="pb-12px text-16px">
在src/assets/svg文件夹下的svg文件，通过在template里面以 icon-custom-{文件名} 直接渲染，动态渲染需要import组件
在src/assets/svg文件夹下的svg文件，通过在template里面以 icon-custom-{文件名} 直接渲染
</div>
<div class="grid grid-cols-10">
<div class="mt-5px flex-x-center">
@ -27,8 +27,11 @@
<div class="mt-5px flex-x-center">
<icon-custom-cast class="text-20px text-error" />
</div>
</div>
<div class="py-12px text-16px">通过SvgIcon组件动态渲染, 菜单通过meta的customIcon属性渲染自定义图标</div>
<div class="grid grid-cols-10">
<div v-for="(item, index) in customIcons" :key="index" class="mt-5px flex-x-center">
<component :is="item" class="text-30px text-primary" />
<svg-icon :icon="item" class="text-30px text-primary" />
</div>
</div>
</n-card>
@ -39,16 +42,10 @@
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { icons } from './icons';
import CustomActivity from '~icons/custom/activity.svg';
import CustomAtSign from '~icons/custom/at-sign.svg';
import CustomCast from '~icons/custom/cast.svg';
import CustomChrome from '~icons/custom/chrome.svg';
import CustomCopy from '~icons/custom/copy.svg';
import CustomWind from '~icons/custom/wind.svg';
const selectValue = ref('');
const customIcons = [CustomActivity, CustomAtSign, CustomCast, CustomChrome, CustomCopy, CustomWind];
const customIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'copy', 'wind'];
</script>
<style scoped></style>