免费制作网页网站,网和网站的区别,新网站建设,东莞市十大广告公司找不到合适的图标#xff0c;如何使用其他的svg图标#xff1f; 安装vite-plugin-svg-icons 使用svg-icon#xff0c;即可使用iconfont等svg图标库 安装及使用过程 一、安装依赖二、在src/assets新建svg目录三、vite.config.js中进行配置四、在main.js中导入文件五、在compo…找不到合适的图标如何使用其他的svg图标 安装vite-plugin-svg-icons 使用svg-icon即可使用iconfont等svg图标库 安装及使用过程 一、安装依赖二、在src/assets新建svg目录三、vite.config.js中进行配置四、在main.js中导入文件五、在components文件中创建SvgIcon.vue文件封装svg组件 一、安装依赖
npm i vite-plugin-svg-icons
npm i fast-glob
二、在src/assets新建svg目录 三、vite.config.js中进行配置
import {createSvgIconsPlugin
} from vite-plugin-svg-icons// 在plugins中添加createSvgIconsPlugin({iconDirs: [resolve(process.cwd(), src/assets/svg)],symbolId: icon-[dir]-[name],}),四、在main.js中导入文件
// 导入svg图标
import virtual:svg-icons-register五、在components文件中创建SvgIcon.vue文件封装svg组件
templatesvg aria-hiddentrue :style{ width: size px, height: size px }use :xlink:hrefsymbolId :fillcolor //svg
/template
script setup langts
import { computed } from vue;const props defineProps({iconName: {type: String,required: true},color: {type: String,default: },size: {type: [Number, String],default: 18}
})
const symbolId computed(() #icon-${props.iconName});/scriptstyle scoped
.svg-icon {fill: currentColor;vertical-align: middle;
}
/style六、最后在需要的文件中使用图标 示例在面包屑组件中引用
templatediv classbread-crumbSvgIcon icon-namelocation classbread-crumb-icon/SvgIconel-breadcrumb separator/el-breadcrumb-item{{props.item.first}}/el-breadcrumb-itemel-breadcrumb-item v-ifprops.item.second{{props.item.second}}/el-breadcrumb-item/el-breadcrumb/div
/templatescript setupimport SvgIcon from /components/SvgIcon.vueconst props defineProps([item])
/script
