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> ...
<use> 元素从 SVG 文档中获取节点,并在其他地方复制它们。 <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: { ...
3.将所需svg文件放置icons的svg文件夹下 icons文件下的index.js文件中的代码如下: import Vue from 'vue'import SvgIcon from'@/components/SvgIcon'//svg组件//register globallyVue.component('svg-icon', SvgIcon) const req= require.context('./svg',false, /\.svg$/) const requireAll= requireContext...
1、设置组件component/icon-svg.vue <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> export default { name: "svgClass", props: { // 使用icon的图标类型 iconClass: { type: String, required: true, }, // 是否添加class样...
一、安装组件svg-sprite-loader npm install svg-sprite-loader --save-dev || yarnaddsvg-sprite-loader AI代码助手复制代码 二、在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue添加如下内容: <template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href=...
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: #...
安装svg插件 默认情况下vite无法处理svg矢量图标,需要安装vite插件 在教程的开始处已经自动导入了图标,所以这里可以跳过 请注意自动导入方案的标签使用和平时有点不一样,正确使用例子: 创建SvgIcon图标组件 本章总结 到目前位置,一个基本的后台项目的框
1 创建组件 在src/components/目录下创建目录svg-icon,该在目录中创建 svg-icon 组件index.vue。 1.1 输入属性 该组件需要两个输入属性(props): icon:SVG 图标的名称或在线 URL className:动态传递给该组件的样式类名 代码如下: const props = defineProps({ ...
1.新建存放svg图标的目录 在项目 src 目录下新建 src/icons/svg 目录(存放 svg 图标文件)。 2.创建svg文件的入口文件 在src/icons 下创建 icons 目录的入口文件 index.js ,负责svg文件的加载 importVuefrom'vue' importSvgIconfrom'@/components/SvgIcon' ...
创建Svg-icon 组件 让我们创建 Svg-icon.vue 组件文件,并在里面接收三个 prop 变量。 icon 是一个字符串类型的 prop 变量用来传递 .svg 文件名的导入 hasFill 是一个布尔类型的 prop 变量来告诉组件 fill 属性是否用于更改 <svg> 元素的颜色,默认值为 false 即不使用 fill 属性 ...