在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 或者如果你...
实现一个在 Vue 项目中方便使用 SVG 图标,允许在页面中通过自定义标签直接引用 SVG 图标,无需手动引入每个图标文件。 具体步骤 1. 使用方式 页面中直接写标签,myicon是svg图片文件名,不需要引入。myicon文件放在指定的svg目录中即可。 <svg-icon icon-class="myicon" 2. 实现方式 (1)新建vite文件夹,建一个p...
* 使用方法:<svg-iconsvg-name="icon-name"width="40px"height="40px"color="#f00"></svg-icon>*/ const props = defineProps({ svgName: { type: String, default: '' }, width: { type: String, default: '20px' }, height: { type: String, default: '20px' }, color: { type: Stri...
symbolId:'icon-[dir]-[name]', }),], resolve: { // 设置别名 alias: { '@':resolve(__dirname, resolve(__dirname,'./src')) } }, }); 其中最关键的是指定 svg 图标的存放位置: 5.4 封装展示 SVG 图标的 icon 组件 1.:xlink:href 用来绑定图标的名称,名称前要加前缀 icon 2.fill 属性用...
第一个参数是:'./svg' => 需要检索的目录, 第二个参数是:false => 是否检索子目录, 第三个参数是: /\.svg$/ => 匹配文件的正则 */requireAll(req); index.vue文件 <template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template>export default { name: ...
4、打开 main.ts 文件,添加注释为【svg-icons相关】的代码 import{createApp}from'vue'importrouterfrom'./router/index'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'import'virtual:svg-icons-register'// 【svg-icons相关】importSvgIconfrom"./components/SvgIcon/index.vue"// 【svg...
<svg aria-hidden="true" class="svg-icon" :style="{height:size,width:size}"> <use :xlink:href="symbolId" :fill="color"></use> </svg> </template> import {computed} from 'vue' const props = defineProps({ //图标大小 size:{ type:[...
symbolId: 'icon-[dir]-[name]' }) ], 1. 2. 3. 4. 5. 6. 7. 8. 9. 在入口文件进行配置: import 'virtual:svg-icons-register' 1. 使用方法 在assets/icons/ 下引入 svg 格式的文件,并给图标命名。 只需在需要的地方,使用 svg 引入图标即可。需要注意的点是:xlink:href用哪个图标,其属性值...
//svg插件需要配置代码import 'virtual:svg-icons-register'; 4.在src/assets中新建目录svgs, 将所有的的svg图片放在svgs文件中 5.封装svg-icon.vue组件 <template><svg:class="className":style="{ width, height: _height }"><use:xlink:href="iconName"></use></svg></template>import { computed }...
{computed}from'vue';constprops=defineProps({iconName:{type:String,required:true},color:{type:String,default:''},size:{type:[Number,String],default:18}})constsymbolId=computed(()=>`#icon-${props.iconName}`);.svg-icon{fill:currentColor;vertical-align:middle;} 5、页面中使用该组件: /...