SVG在VUE3上的配置与使用

2023-07-30 04:02| 来源: 网络整理| 查看: 265

前述

hello，大家好。好就没更新啦，是不是很想我～ 😜。拖更这么久，也没什么原因，哈哈哈，纯粹是懒... 看了一眼距离上次写文章已经过去四个月之久，咦惹～

好了，现在就直接进入正题吧，今天要说的是关于svg的配置以及使用。

为什么要说这个呢，主要是最近一直在看vue3相关的知识，顺便用vite搭了一个项目，以及使用了ts。

在自己的搭建的项目中，本来是想简单点使用的一些公共组件库，但是很鸡肋。没法满足一些特定的业务需求，于是乎，就打算自己写一套。继而呢，就决定用svg，就在这时，发现怎么感觉哪哪都在报错？？？黑人问号脸，于是就花时间去看了一下。嚯，果然小有差异。于是就有了这篇文章，记录一下。

那就开始咯～

正文准备工作安装依赖 npm install svg-sprite-loader -D yarn add svg-sprite-loader -D 复制代码组件编写

在安装好相关依赖之后，就开始写一个公共组件暴露出去吧。这个组件的目的，不言而喻，不做解释啦。

// src/components/svgIcon.vue import { defineComponent, computed } from "vue"; export default defineComponent({ name: "SvgIcon", props: { // 因为是被调用，所以要传入props name: { // 自定义svg的name属性 type: String, required: true, }, color: { // 自定义svg的color属性 type: String, default: "", }, }, setup(props) { // 数据处理 // 这边就是根据props的name来进行处理啦 const iconName = computed(() => `#icon-${props.name}`); const svgClass = computed(() => { // console.log(props.name, "props.name"); if (props.name) { return `svg-icon icon-${props.name}`; } return "svg-icon"; // svg 标签 }); return { iconName, svgClass, }; }, }); // 自己定一些喜欢的样式 .svg-icon { width: 1.6em; height: 1.6em; margin-left: 3px; } 复制代码

具体的解释看注解哦～接下来看继续下一步。

svg编写 // src/icons/svg/ 这个地方就是存放各种你想写入的svg； eg：复制代码

这些文件夹放的位置啊，取名啊，全凭个人爱好，想怎么操作，就怎么操作。（怎么开心怎么来，当然最好正式一点。

全局注入

在main.ts 里面全局注入svg-icon组件，此举是注入灵魂之举。哈哈哈哈

//main.ts import svgIcon from './components/SvgIcon.vue' app.use(router).use(store, key).use(ElementPlus, { i18n: i18n.global.t, size: globalComponentSize }).use(i18n).use(VueGridLayout).component('svg-icon', svgIcon).mount('#app'); 复制代码

此举的目的是在全局都可挂载此组件。

关于vite中的plugin（这是重点）

如果你是用的ts，那么这就是重点了，因为不做这一步，就不回生效，各种报错，具体可以参考下

点我看详情

这也是其中一个机制。

好了，说好前文，就开始整活吧

// src/plugins/Builder.js import { readFileSync, readdirSync } from 'fs' let idPerfix = '' const svgTitle = /+].*?)>/ const clearHeightWidth = /(width|height)="([^>+].*?)"/g const hasViewBox = /(viewBox="[^>+].*?")/g const clearReturn = /(\r)|(\n)/g function findSvgFile(dir) { const svgRes = [] const dirents = readdirSync(dir, { withFileTypes: true }) for (const dirent of dirents) { if (dirent.isDirectory()) { svgRes.push(...findSvgFile(dir + dirent.name + '/')) } else { const svg = readFileSync(dir + dirent.name) .toString() .replace(clearReturn, '') .replace(svgTitle, ($1, $2) => { // console.log(++i) // console.log(dirent.name) let width = 0 let height = 0 let content = $2.replace( clearHeightWidth, (s1, s2, s3) => { if (s2 === 'width') { width = s3 } else if (s2 === 'height') { height = s3 } return '' } ) if (!hasViewBox.test($2)) { content += `viewBox="0 0 ${width} ${height}"` } return `` }) .replace('', '') svgRes.push(svg) } } return svgRes } export const svgBuilder = (path, perfix = 'icon') => { if (path === '') return idPerfix = perfix const res = findSvgFile(path) // console.log(res.length) // const res = [] return { name: 'svg-transform', transformIndexHtml(html) { return html.replace( '', ` ${res.join('')} ` ) } } } 复制代码一发入魂

最后的最后，就是去vite.config.ts 中配置了，目的是将src/icons/svg/下的svg全部导入，不用你写一个导入一个，联动起来，是不是很虚浮？

import { svgBuilder } from './src/plugins/svgBuilder'; plugins: [ svgBuilder('./src/icons/svg/') ], 复制代码使用

好了，全部事情都做完之后，就可以进行使用啦。

具体使用：

// 在你具体的vue项目中导入 & 引用 import SvgIcon from "@/components/SvgIcon.vue"; // components: { SvgIcon }, // 复制代码

如果你想把这个icon 在你的其他组件中进行封装，也很简单奥～

结语

好了，关于vite打包构建的vue3项目下，如何使用svg就讲完了。

接下来也不知道下次更新会在设么时候，不确定。

最近也不知道该做什么，该怎么走。换言之，内心强烈的知道自己要干什么，怎么做。遇到了一个漫长的瓶颈期。

好啦，看完这篇就早点下班吧～祝各位双休愉快。嗨起来～拜拜～

【本文地址】

SVG在VUE3上的配置与使用

SVG在VUE3上的配置与使用

今日新闻

推荐新闻