dir)}//配置module.exports=defineConfig({chainWebpack:(config)=>{//配置 svg-sprite-loader// 第一步:让其他svg loader不要对src/icons进行操作config.module.rule('svg').exclude.add(resolve('src/SvgIcon/svg'))//注意:路径要具体到存放的svg的路径下,不然会报错.end()// 第二步:使用svg-sprite-l...
在src/components文件夹下新建SvgIcon文件夹,然后在SvgIcon文件夹下index.ts文件,内容如下: <!--src/components/SvgIcon/index.vue--> <template> <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size" > <use :xlink:href="symbolId" :fill="color"/> </s...
import SvgIcon from '@/components/SvgIcon' // https://webpack.docschina.org/guides/dependency-management/#requirecontext // 通过 require.context() 函数来创建自己的 context const svgRequire = require.context('./svg', false, /\.svg$/) svgRequire.keys().forEach(svgIcon => svgRequire(svgIco...
{ createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')], // 指定symbolId格式 symbolId: 'icon-[dir...
在Vue 3项目中使用SVG图标(svg-icon),你可以按照以下步骤进行操作: 1. 安装并引入svg-icon相关的Vue 3插件或组件 首先,你需要安装一个能够将SVG图标转换为Vue组件的插件,比如vite-plugin-svg-icons。如果你使用的是Vite构建工具,可以通过以下命令安装: bash pnpm install vite-plugin-svg-icons -D 或者如果你...
<template><svgaria-hidden="true":style="{width: size + 'px',height: size + 'px'}"><use:xlink:href="symbolId":fill="color"/></svg></template>import{computed}from'vue';constprops=defineProps({iconName:{type:String,required:true},color:{type:String,default:''},size:{type:[Number,...
在componemts里新建svgIcon文件夹,新建index.vue,封装成组件 <template> <svg :class="svgClass"aria-hidden="true"> <use :xlink:href="iconName"/> </svg> </template> exportdefault{ name:"svgIcon", props: { iconClass: { type: String, required:...
3、通过组件来显示外部svg图标 4、内部引用svg图标 5、完成导入所有的svg图标 6、全局导入SvgIcon 7、...
symbolId: 'icon-[dir]-[name]', }), ], } } (三)封装组件 创建SvgIcon组件,封装svg。( /src/components/SvgIcon/index.vue) <template> <svg aria-hidden="true" class="svg-icon" :style="{height:size,width:size}"> <use :xlink:href="symbolId" :fill="color"></use> ...
svgName: { type: String, default: '' }, width: { type: String, default: '20px' }, height: { type: String, default: '20px' }, color: { type: String, default: '#000' } })<template></template>.svg-icon { display: block; width: 42px; height: 40px; background-color: #...