feat(projects): 新增自定义svg图标动态渲染
This commit is contained in:
parent
f5a043b11a
commit
f83c7b59b8
@ -12,5 +12,4 @@ lib
|
|||||||
.vscode
|
.vscode
|
||||||
.local
|
.local
|
||||||
package.json
|
package.json
|
||||||
components.d.ts
|
|
||||||
!.env-config.ts
|
!.env-config.ts
|
||||||
|
@ -1,21 +0,0 @@
|
|||||||
import Icons from 'unplugin-icons/vite'; // iconify图标
|
|
||||||
import IconsResolver from 'unplugin-icons/resolver';
|
|
||||||
import Components from 'unplugin-vue-components/vite'; // 从指定目录自动导入组件
|
|
||||||
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
|
|
||||||
|
|
||||||
export default (srcPath: string) => {
|
|
||||||
return [
|
|
||||||
Icons({
|
|
||||||
compiler: 'vue3',
|
|
||||||
customCollections: {
|
|
||||||
custom: FileSystemIconLoader(`${srcPath}/assets/svg`),
|
|
||||||
},
|
|
||||||
scale: 1,
|
|
||||||
defaultClass: 'inline-block',
|
|
||||||
}),
|
|
||||||
Components({
|
|
||||||
dts: true,
|
|
||||||
resolvers: [IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })],
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
};
|
|
4
components.d.ts
vendored
4
components.d.ts
vendored
@ -13,11 +13,11 @@ declare module 'vue' {
|
|||||||
IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default'];
|
IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default'];
|
||||||
IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default'];
|
IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default'];
|
||||||
IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default'];
|
IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default'];
|
||||||
|
IconCustomActivity: typeof import('~icons/custom/activity')['default'];
|
||||||
IconCustomAvatar: typeof import('~icons/custom/avatar')['default'];
|
IconCustomAvatar: typeof import('~icons/custom/avatar')['default'];
|
||||||
IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default'];
|
IconCustomCast: typeof import('~icons/custom/cast')['default'];
|
||||||
IconCustomLogo: typeof import('~icons/custom/logo')['default'];
|
IconCustomLogo: typeof import('~icons/custom/logo')['default'];
|
||||||
IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default'];
|
IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default'];
|
||||||
IconCustomNetworkError: typeof import('~icons/custom/network-error')['default'];
|
|
||||||
IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default'];
|
IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default'];
|
||||||
IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default'];
|
IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default'];
|
||||||
IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default'];
|
IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default'];
|
||||||
|
@ -1,4 +0,0 @@
|
|||||||
import LoadingEmptyWrapper from './LoadingEmptyWrapper.vue';
|
|
||||||
import LoginAgreement from './LoginAgreement.vue';
|
|
||||||
|
|
||||||
export { LoadingEmptyWrapper, LoginAgreement };
|
|
@ -1,7 +0,0 @@
|
|||||||
import NaiveProvider from './NaiveProvider.vue';
|
|
||||||
import SystemLogo from './SystemLogo.vue';
|
|
||||||
import DarkModeSwitch from './DarkModeSwitch.vue';
|
|
||||||
import DarkModeContainer from './DarkModeContainer.vue';
|
|
||||||
import HoverContainer from './HoverContainer.vue';
|
|
||||||
|
|
||||||
export { NaiveProvider, SystemLogo, DarkModeSwitch, DarkModeContainer, HoverContainer };
|
|
@ -1,8 +0,0 @@
|
|||||||
import BetterScroll from './BetterScroll.vue';
|
|
||||||
import CountTo from './CountTo.vue';
|
|
||||||
import ImageVerify from './ImageVerify.vue';
|
|
||||||
import WebSiteLink from './WebSiteLink.vue';
|
|
||||||
import GithubLink from './GithubLink.vue';
|
|
||||||
import IconSelect from './IconSelect.vue';
|
|
||||||
|
|
||||||
export { BetterScroll, CountTo, ImageVerify, WebSiteLink, GithubLink, IconSelect };
|
|
@ -1,3 +0,0 @@
|
|||||||
export * from './custom';
|
|
||||||
export * from './common';
|
|
||||||
export * from './business';
|
|
@ -17,25 +17,18 @@
|
|||||||
</template>
|
</template>
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card title="SvgIcon 示例" class="mt-10px shadow-sm rounded-16px">
|
<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="pb-12px text-16px">
|
||||||
|
在src/assets/svg文件夹下的svg文件,通过在template里面以 icon-custom-{文件名} 直接渲染,动态渲染需要import组件
|
||||||
|
</div>
|
||||||
<div class="grid grid-cols-10">
|
<div class="grid grid-cols-10">
|
||||||
<div class="mt-5px flex-x-center">
|
<div class="mt-5px flex-x-center">
|
||||||
<icon-custom-activity class="text-30px" />
|
<icon-custom-activity class="text-40px text-success" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-5px flex-x-center">
|
<div class="mt-5px flex-x-center">
|
||||||
<icon-custom-at-sign class="text-30px text-primary" />
|
<icon-custom-cast class="text-20px text-error" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-5px flex-x-center">
|
<div v-for="(item, index) in customIcons" :key="index" class="mt-5px flex-x-center">
|
||||||
<icon-custom-cast class="text-18px text-info" />
|
<component :is="item" class="text-30px text-primary" />
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</n-card>
|
</n-card>
|
||||||
@ -46,7 +39,15 @@
|
|||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { Icon } from '@iconify/vue';
|
import { Icon } from '@iconify/vue';
|
||||||
import { icons } from './icons';
|
import { icons } from './icons';
|
||||||
|
import CustomActivity from '~icons/custom/activity';
|
||||||
|
import CustomAtSign from '~icons/custom/at-sign';
|
||||||
|
import CustomCast from '~icons/custom/cast';
|
||||||
|
import CustomChrome from '~icons/custom/chrome';
|
||||||
|
import CustomCopy from '~icons/custom/copy';
|
||||||
|
import CustomWind from '~icons/custom/wind';
|
||||||
|
|
||||||
const selectValue = ref('');
|
const selectValue = ref('');
|
||||||
|
|
||||||
|
const customIcons = [CustomActivity, CustomAtSign, CustomCast, CustomChrome, CustomCopy, CustomWind];
|
||||||
</script>
|
</script>
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
Loading…
Reference in New Issue
Block a user