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> ...
<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...
三、在src下新建icons文件夹,及icons文件夹下svg文件夹、index.js文件,将svg图片放入svg文件夹中,在 index.js文件中添加如下内容 importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'// svg 组件// 全局注册svg组件Vue.component('svg-icon',SvgIcon)// 工程化导入svg图片constreq =require.context('./...
import{ createSvgIconsPlugin }from"vite-plugin-svg-icons";//svgIconplugins:[// svg组件化支持createSvgIconsPlugin({iconDirs: [pathResolve("../src/assets/svg")],// 指定symbolId格式symbolId:"icon-[name]",customDomId:"xxx-svgs",// 避免多项目互相影响}), ], 注:svg文件目录:/src/assets/...
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...
安装svg插件 默认情况下vite无法处理svg矢量图标,需要安装vite插件 在教程的开始处已经自动导入了图标,所以这里可以跳过 请注意自动导入方案的标签使用和平时有点不一样,正确使用例子: 创建SvgIcon图标组件 本章总结 到目前位置,一个基本的后台项目的框
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: #...
1 创建组件 在src/components/目录下创建目录svg-icon,该在目录中创建 svg-icon 组件index.vue。 1.1 输入属性 该组件需要两个输入属性(props): icon:SVG 图标的名称或在线 URL className:动态传递给该组件的样式类名 代码如下: const props = defineProps({ ...
vue项目中时常需要引用icon图标,特地写一个组件用于引用svg icon。 1.将你想要的svg加入购物车,点击下载代码 打开下载的文件夹,将其中的js文件复制进你的项目 在index.html中引入该js文件 2.创建icon.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> ...
1.新建存放svg图标的目录 在项目 src 目录下新建 src/icons/svg 目录(存放 svg 图标文件)。 2.创建svg文件的入口文件 在src/icons 下创建 icons 目录的入口文件 index.js ,负责svg文件的加载 importVuefrom'vue' importSvgIconfrom'@/components/SvgIcon' ...