第一个参数是:'./svg' => 需要检索的目录, 第二个参数是:false => 是否检索子目录, 第三个参数是: /\.svg$/ => 匹配文件的正则 */requireAll(req); index.vue文件 <template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template>export default { name: '...
symbolId:'icon-[dir]-[name]', }),], resolve: { // 设置别名 alias: { '@':resolve(__dirname, resolve(__dirname,'./src')) } }, }); 其中最关键的是指定 svg 图标的存放位置: 5.4 封装展示 SVG 图标的 icon 组件 1.:xlink:href 用来绑定图标的名称,名称前要加前缀 icon 2.fill 属性用...
* 使用方法:<svg-iconsvg-name="icon-name"width="40px"height="40px"color="#f00"></svg-icon>*/ const props = defineProps({ svgName: { type: String, default: '' }, width: { type: String, default: '20px' }, height: { type: String, default: '20px' }, color: { type: Stri...
在src/components文件夹下新建SvgIcon文件夹,然后在SvgIcon文件夹下index.ts文件,内容如下: <!--src/components/SvgIcon/index.vue--> <template> <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size" > <use :xlink:href="symbolId" :fill="color"/> </s...
<svg-icon name="test"></svg-icon> 如果项目不能成功显示SVG,可以尝试重新启动项目。 二、方法二 方法二需要自己配置,有些麻烦 1、在 src/components/ 下创建 SvgIcon 组件 SvgIcon <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> ...
在Vue 3项目中使用SVG图标(svg-icon),你可以按照以下步骤进行操作: 1. 安装并引入svg-icon相关的Vue 3插件或组件 首先,你需要安装一个能够将SVG图标转换为Vue组件的插件,比如vite-plugin-svg-icons。如果你使用的是Vite构建工具,可以通过以下命令安装: bash pnpm install vite-plugin-svg-icons -D 或者如果你...
二、SVG的使用 1、创建一个vue 2.x项目 2、安装插件 cnpm install svg-sprite-loader --save 3、封装svgIcon组件 在componemts里新建svgIcon文件夹,新建index.vue,封装成组件 <template> <svg :class="svgClass"aria-hidden="true"> <use :xlink:href="iconName"/> ...
symbolId: 'icon-[dir]-[name]' }) ], 1. 2. 3. 4. 5. 6. 7. 8. 9. 在入口文件进行配置: import 'virtual:svg-icons-register' 1. 使用方法 在assets/icons/ 下引入 svg 格式的文件,并给图标命名。 只需在需要的地方,使用 svg 引入图标即可。需要注意的点是:xlink:href用哪个图标,其属性值...
<svg aria-hidden="true" class="svg-icon" :style="{height:size,width:size}"> <use :xlink:href="symbolId" :fill="color"></use> </svg> </template> import {computed} from 'vue' const props = defineProps({ //图标大小 size:{ type:[...
<template> <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size"> <use :xlink:href="symbolId" :fill="props.color" /> </svg> </template> import { computed } from 'vue' const props = defineProps({ prefix: { type: String, default: 'icon' }, name...