-
• 使用vite显示本地svg图标
-
• vite-plugin-svg-icons 使用
-
• 安装 vite-plugin-svg-icons
-
• 配置SVG图片文件夹
-
• 在项目根目录查找vite.config.js,进行配置
-
• vite-plugin-svg-icons插件引入在main.js中
-
• 新建svg封装组件
-
• 按需引入使用
-
• 全局引入使用
使用vite显示本地svg图标
vite-plugin-svg-icons 使用
npm 地址：https://www.npmjs.com/package/vite-plugin-svg-icons
安装 vite-plugin-svg-icons
npm i vite-plugin-svg-icons -D
// 或者
yarn add vite-plugin-svg-icons -D配置SVG图片文件夹
在项目根目录查找vite.config.js,进行配置
//import path,{ resolve } from 'path'
import path from 'path'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
export default defineConfig((command) => {
return {
plugins: [
createSvgIconsPlugin({
// 指定要缓存的文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: '[name]'
})
],
}
})vite-plugin-svg-icons插件引入在main.js中
import 'virtual:svg-icons-register'新建svg封装组件
<template>
<svg :class="svgClass" aria-hidden="true">
<use class="svg-use" :href="symbolId" />
</svg>
</template>
<script setup lang="ts">
const props = defineProps<{
prefix: {
type: String;
default: "icon";
};
name: {
type: String;
required: true;
};
className: {
type: String;
default: "";
};
}>();
const symbolId = computed(() => `#${props.name}`);
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`;
}
return "svg-icon";
});
</script>按需引入使用
<template>
<SvgIcon name="issue"></SvgIcon>
</template>
<script setup>
import SvgIcon from "@/components/SvgIcon.vue";
</script>全局引入使用
在main.js中加入
import svgIcon from './components/svgIcon/index.vue'
createApp(App).component('svg-icon', svgIcon)组件中使用
<template>
<template v-for="item in routes" :key="item.path">
<a-menu-item :key="item.path" v-if="!item.children || item.children.length === 0">
<template #icon>
<SvgIcon class="aaa" style="width: 14px; height: 14px" :name="item.meta.icon" v-if="item.meta && item.meta.icon"></SvgIcon>
</template>
<span>{{ item.meta?.title }}</span>
</a-menu-item>
</template>
</template>
<script setup lang="ts">
defineOptions({
name: "menuItem",
});
defineProps<{ routes: Array<RouteRecordRaw> }>();
</script>参考文档
-
• https://blog.csdn.net/weixin_53731501/article/details/125478380
原文始发于微信公众号（前端爱好者）：vue3.x学习笔记之项目实战 — 如何使用SVG图片
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267197.html
