Vue+Vite项目封装 svg 组件,使用阿里巴巴矢量图标

文章目录

    • 一、装插件
    • 二、创建SVG组件
    • 二、main.ts中全局注册
    • 三、来到 vite.config.ts
    • 四、在代码中使用
    • 五、注意点
    • 六、我如何使用svg
          • 我平时用的比较多的就是 [阿里巴巴矢量图库](/?spm=a313x.7781069.1998910419.d4d0a486a),具体操作如下动图。

一、装插件

// 1、先执行这条命令
npm i fast-glob -D
// 2、再执行这条命令
npm i vite-plugin-svg-icons -D

二、创建SVG组件

如图所示创建文件,并写入如下代码

<script setup lang="ts">
import { computed } from "vue";const props = defineProps({iconClass: {type: String,required: true,},className: {type: String,default: "",},iconColor: {type: String,default: "CurrentColor",},
});
const iconName = computed(() => `#icon-${props.iconClass}`);
const svgClass = computed(() => {if (props.className) {return "svg-icon " + props.className;} else {return "svg-icon";}
});
</script>
<template><svg :class="svgClass" aria-hidden="true" :fill="iconColor"><use :xlink:href="iconName" /></svg>
</template><style scoped>
.svg-icon {// svg 图标默认宽高,根据个人使用情况自行调整width: 20px;height: 20px;fill: currentColor;overflow: hidden;
}
</style>

二、main.ts中全局注册

import { createApp } from 'vue'
import App from './App.vue'// svg 相关
import 'virtual:svg-icons-register'
import SvgIcon from './components/svgIcon/index.vue'// 导入 pinia
import { createPinia } from 'pinia'
// 创建 pinia 实例
const pinia = createPinia()
appponent('svg-icon', SvgIcon).use(pinia).mount('#app');

三、来到 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";// svg plugin
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'export default defineConfig({plugins: [vue(),// 修改 svg 相关配置createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(__dirname, './src/assets/svg')],})],
})

四、在代码中使用

  <svg-icon icon-class="close" />

五、注意点

若想修改 svg 的颜色,记得将 svg图片代码中的 fill属性删除删除


六、我如何使用svg

我平时用的比较多的就是 阿里巴巴矢量图库,具体操作如下动图。

Vue+Vite项目封装 svg 组件,使用阿里巴巴矢量图标

文章目录

    • 一、装插件
    • 二、创建SVG组件
    • 二、main.ts中全局注册
    • 三、来到 vite.config.ts
    • 四、在代码中使用
    • 五、注意点
    • 六、我如何使用svg
          • 我平时用的比较多的就是 [阿里巴巴矢量图库](/?spm=a313x.7781069.1998910419.d4d0a486a),具体操作如下动图。

一、装插件

// 1、先执行这条命令
npm i fast-glob -D
// 2、再执行这条命令
npm i vite-plugin-svg-icons -D

二、创建SVG组件

如图所示创建文件,并写入如下代码

<script setup lang="ts">
import { computed } from "vue";const props = defineProps({iconClass: {type: String,required: true,},className: {type: String,default: "",},iconColor: {type: String,default: "CurrentColor",},
});
const iconName = computed(() => `#icon-${props.iconClass}`);
const svgClass = computed(() => {if (props.className) {return "svg-icon " + props.className;} else {return "svg-icon";}
});
</script>
<template><svg :class="svgClass" aria-hidden="true" :fill="iconColor"><use :xlink:href="iconName" /></svg>
</template><style scoped>
.svg-icon {// svg 图标默认宽高,根据个人使用情况自行调整width: 20px;height: 20px;fill: currentColor;overflow: hidden;
}
</style>

二、main.ts中全局注册

import { createApp } from 'vue'
import App from './App.vue'// svg 相关
import 'virtual:svg-icons-register'
import SvgIcon from './components/svgIcon/index.vue'// 导入 pinia
import { createPinia } from 'pinia'
// 创建 pinia 实例
const pinia = createPinia()
appponent('svg-icon', SvgIcon).use(pinia).mount('#app');

三、来到 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";// svg plugin
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'export default defineConfig({plugins: [vue(),// 修改 svg 相关配置createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(__dirname, './src/assets/svg')],})],
})

四、在代码中使用

  <svg-icon icon-class="close" />

五、注意点

若想修改 svg 的颜色,记得将 svg图片代码中的 fill属性删除删除


六、我如何使用svg

我平时用的比较多的就是 阿里巴巴矢量图库,具体操作如下动图。