src文件里面的components文件夹,components文件夹里面的svgIcon文件夹,svgIcon文件夹里面新建Index.vue文件,Index.vue文件的内容如下: iconName和className属性是从引用PageSidebar.vue的父组件传递过来的 <template> <svg :class="svgClassName" aria-hidden="true"> <use :xlink:href="svgIcon"></use> </svg> ...
SVGIcon 图标组件的构建 有了以上知识储备,我们可以大致给出 SVGIcon 组件的构建方向: 基于use 元素,封装一个通用灵活的图标组件。 聚合SVG 图标,生成 sprite-svg 文件。 [任务一] 封装图标组件 组件Props 的定义 首先需要定义好这个组件的 interface 输入,我们所期望的通用 SVG 组件,主要需要实现以下几点:指定图标...
3.创建SvgIcon组件 这个组件将会是一个公用组件,可以在很多项目中使用,因此建议放在公用组件文件夹中 //此组件接收一个必传的参数name:svg文件的名称<template><svgclass="svg-icon"aria-hidden="true"><use:xlink:href="`#icon-${name}`"/></svg></template>exportdefault{name:'SvgIcon',props: {name:...
<template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName"/></svg></template>import { isExternal } from "@/utils/validate"; export default { name: "SvgIcon", props: { iconClass: { type: String, required: true, }, className: { type: S...
4. 全量引入icon后会发现有些icon项目用不到,项目ui新增的icon又不能使用同样格式去调用。 5. 不如直接放弃element 的icon组件,采用自行封装svg组件。 操作流程 依赖安装 使用vite-plugin-svg-icons插件识别本地svg库 yarnaddvite-plugin-svg-icons-D#或npminstallvite-plugin-svg-icons-D#或pnpminstallvite-plugi...
npm i -D svgo-loader 1. 2. 配置组件 创建SvgIcon组件 在我们脚手架搭建的vue-demo项目中,图中标注位置,新建SvgIcon目录,目录内部创建index.vue <template> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </...
第67讲 自定义svg-icon组件实现是SpringBoot微信小程序电商实战项目课程 Vue3.2 Element Plus后台管理 ( 火爆连载更新中... )的第68集视频,该合集共计97集,视频收藏或关注UP主,及时了解更多相关视频内容。
我们选择的是第二种方式使用svg-sprite-loader进行svg到icon的转换 编写SvgIcon组件 组件文件结构 src/packages/SvgIcon/index.vue //src/packages/SvgIcon/index.vue<template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:href="iconName"rel="external nofollow"/></svg></templ...
}"@mousedown="clickIcon"><use:xlink:href="`#icon-${props.name}`":fill="props.color"/></svg></template>import { defineComponent } from "vue"; /** * @description: svg图标组件 * @use {*}<SvgIconname="home":size="14"color="red"/>*/ export default defineComponent...
icon string - 图标名 color string - 图标颜色 size number 16 图标大小 prefix string - 图标前缀(5.7.0已删除) # SvgIcon 组件 自动加载 /src/assets/icons 下的svg 文件 v5.7.0 中已弃用,可直接通过 i-svg:sun 读取 # 使用 <template> <SvgIcon name="sun" /> </template> import { SvgIc...