在上面的例子中,SvgIcon组件通过props接收了viewBox、className、xmlns、width和height等属性,这些属性可以用来控制SVG图标的显示。通过props传递参数,你可以轻松地复用SvgIcon组件,并在不同的地方使用不同的SVG图标。 这样,你就完成了在Vue 3中封装SVG图标的过程。这种方式不仅提高了图标的复用性,还使得图标的管理更加...
// 引入项目中的全局组件importSvgIconfrom"./SvgIcon/index.vue";// 其他需要引入组件// 将自定义组件放入对象中constallGloablCom={SvgIcon,// 其他需要引入组件};// 对外暴露插件对象exportdefault{// 只能叫做 install 方法install(app){// 循环遍历,注册 allGloablCom 中全部组件Object.keys(allGloablCom...
在真实的企业级开发中,Element Plus内置的图标通常很难满足业务需求,项目中需要引入大量的 SVG 图标资源,本文描述如何在 Vue3 + Vite2 环境中使用 SVG 图标,封装一个支持本地 SVG 图标和在线 SVG 图标的组件svg-icon。 文中实现的svg-icon组件会内置到yyg-cli脚手架中(通过yyg命令行创建的项目内置该组件),如...
下面我们就开始编写插件及组件,来实现它,分5步走 - 第一步: 建立所需文件 - 第二步:封装转换并读取svg文件的插件 - 第三步:利用vite transformIndexHtml封装渲染svg内容 - 第四步:封装vue组件并全局注册 - 第五步:页面中应用传值 第一步:建立所需文件 首先在src文件夹下建立如下文件: image.png 目录文件...
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>
SvgIcon/index.vue 封装<svg-icon />组件 svg目录存放你的svg格式的文件 index.js 全局注册svg的钩子 svgTagView.js svg插件 第二步:封装(转换并读取svg)文件的插件 1. 首先在svgTagView.js中引入node文件系统,并在vite中使用 import { readFileSync, readdirSync } from 'fs' ...
本文讲述如何在vue-cli3项目中引入svg格式图片并封装成通用vue组件 1.首先在src路径下的components文件夹里新建一个IconSvg.vue组件template里面写入 <svg:class="svgClass"aria-hidden="true"v-on="$listeners"> <use:xlink:href="iconName"/> </svg> ...
4.3 封装成全局组件,在src文件夹下创建plugin/index.ts //引入项目中的全局组件importSvgIconfrom'@/components/svgIcon.vue'//全局对象constallGlobalComponents={SvgIcon}//对外暴露插件对象exportdefault{install(app){//注册项目的全部组件Object.keys(allGlobalComponents).forEach((key)=>{//注册为全局组件app...
4️⃣ 完成 svg-icon 组件 5️⃣ 测试本地图标🔧 配置步骤 创建组件:定义组件的输入属性和样式。 在线图标:判断图标是否在线,并创建相应的模板和样式。 本地图标:安装开发依赖,配置 Vite,修改 main.ts,完成 svg-icon 组件,并进行测试。0 0 ...
1 创建组件 在src/components/目录下创建目录svg-icon,该在目录中创建 svg-icon 组件index.vue。 1.1 输入属性 该组件需要两个输入属性(props): icon:SVG 图标的名称或在线 URL className:动态传递给该组件的样式类名 代码如下: const props = defineProps({ ...