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
我平时用的比较多的就是 阿里巴巴矢量图库,具体操作如下动图。
发布评论