插件是封装完了,下一步我们就得封装svg vue组件,来渲染证实它 第四步:封装vue组件并全局注册 打开我们第一次新建的文件components/SvgIcon/index.vue 1. 封装一个全局通用的svg-icon组件如下: 可自行配置svg标签可有的属性(width,class,name等等...),封装语法很简单,这里不再赘述 <template> <svg :class="sv...
1、在 src/components/ 下创建 SvgIcon 组件 <template><svg:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName"/></svg></template>exportdefault{name:'SvgIcon',props: {iconClass: {type:String,required:true},className: {type:String,default:''} },computed: { ...
文中实现的svg-icon组件会内置到yyg-cli脚手架中(通过yyg命令行创建的项目内置该组件),如果在此之前已经通过 yyg-cli 创建了项目,可以按照本文的步骤封装 SVG 图标组件svg-icon。 1 创建组件 在src/components/目录下创建目录svg-icon,该在目录中创建 svg-icon 组件index.vue。 1.1 输入属性 该组件需要两个输...
<template><svg:style="{ width, height }"><use:href="prefix + name":fill="color"></use></svg></template>// 接收父组件传递过来的参数defineProps({prefix:{type:String,default:"#icon-"},// svg名称name:String,// svg颜色color:{type:String,default:"#ffffff"},// svg宽度width:{type:St...
组件封装 <template> <svg> <use :xlink:href="prefix + name" :fill="color"></use> </svg> </template> defineProps({ // xlink:href 前缀 prefix: { type: String, default: '#icon' }, // 图标的名字 name: String, // 图标颜色...
如果你不使用SVG Sprite(比如,你直接将SVG代码嵌入到Vue组件中),你可以直接修改SvgIcon.vue组件,将SVG代码内联到模板中。但在这个例子中,我们假设你正在使用SVG Sprite或类似的机制来管理你的SVG图标。 6. 在其他组件中引用和使用SVG组件 现在,你可以在项目的任何其他地方引用并使用SvgIcon组件了。 App.vue vue ...
1、安装 vite-plugin-svg-icon失败 失败原因:是现有vite版本太低 解决办法:升级vite版本 2、封装组件 现象:defineOption会报错,并且无法使用组件 解决办法:删掉这段代码,然后在index.ts注册组件那里从这样: 修改成这样: 然后就能正常使用组件了。 没有实践:编写自定义 vite 插件,增强 name 字段类型提示 下面的...
第一步：建立所需文件，首先在 src 文件夹下建立以下文件：插件文件：svgTagView.js组件文件：components/SvgIcon/index.vue图标文件目录：icons/svg第二步：封装（转换并读取 svg）文件的插件，包括引入 node 文件系统、配置 svg 正则匹配标签和属性、使用递归形式读取 svg 文件信息等。第三步：利用 ...
4、封装 svg 组件 外部引用 symbol 链接 接收icon name 在vue3项目public/index.html中引入symbol 链接 icon 外层样式封装 创建src/components/Icon.vue <template> <svg class="icon"> <use :href="iconName"></use> </svg> </template>
1.首先在src路径下的components文件夹里新建一个IconSvg.vue组件template里面写入 <svg:class="svgClass"aria-hidden="true"v-on="$listeners"> <use:xlink:href="iconName"/> </svg> props接收两个值iconClass与className;然后通过计算属性根据组件中传入的iconClass以及className去计算iconName以及svgClass ...