在vue3+vite+ ts 项目中使用svg

一：components下新建svgIcon.vue文件

<template>  <svg :class="svgClass" v-bind="$attrs" :style="style"><use :xlink:href="iconName" /></svg>
</template><script lang="ts">
import { computed } from 'vue'
import { defineComponent} from 'vue'
export default defineComponent({props: {name: {type: String,required: true,},style: {type: Object,default: '',},},setup(props) {const iconName = computed(()=>`#icon-${props.name}`);const svgClass = computed(() => {if (props.name) {return `svg-icon icon-${props.name}`}return 'svg-icon'})return {svgClass,iconName}},
})
</script><style>
.svg-icon { fill: currentColor;vertical-align: middle;
}
</style>

二：创建icons文件夹，存放svg文件

三：在main.ts里面全局注入svg-icon组件

// 注入svg
import svgIcon from './components/svgIcon.vue'
app.component('svg-icon', svgIcon)

四：在plugins文件夹创建svgBuilder.js

import { readFileSync, readdirSync } from 'fs'let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/gconst hasViewBox = /(viewBox="[^>+].*?")/gconst clearReturn = /(\r)|(\n)/gfunction 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 = 0let height = 0let 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 `<symbol id="${idPerfix}-${dirent.name.replace('.svg','')}" ${content}>`}).replace('</svg>', '</symbol>')svgRes.push(svg)}}return svgRes
}export const svgBuilder = (path, perfix = 'icon') => {if (path === '') returnidPerfix = perfixconst res = findSvgFile(path)// console.log(res.length)// const res = []return {name: 'svg-transform',transformIndexHtml(html) {return html.replace('<body>',`<body><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">${res.join('')}</svg>`)}}
}

五: 最后在vite.config.ts修改配置

import { svgBuilder } from './src/plugins/svgBuilder'; export default defineConfig({plugins: [svgBuilder('./src/icons/svg/')] // 这里已经将src/icons/svg/下的svg全部导入，无需再单独导入
})

六：在页面中使用

<svg-icon name="aa" :style='style' ></svg-icon><script lang="ts">
import { defineComponent } from 'vue' export default defineComponent({name: 'HelloWorld', setup: () => {const style = {width: '50px'}return { style }}
})
</script>

在vue3+vite+ ts 项目中使用svg相关推荐

【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
vue3+vite+ts项目集成科大讯飞语音识别（项目搭建过程以及踩坑记录）
vue3 + vite + ts 集成mars3d
vue3 + vite + ts 集成mars3d 文章目录 vue3 + vite + ts 集成mars3d 前言一.创建一个vue3 + vite + ts项目二.引入mars3d相关依赖 ...
如何在vue3+vite+ts中使用require
vue3+vite+ts中不能使用require 之前使用vue2,去动态设置图片src属性时,采用require,但是vue3+vite+ts中使用require,项目能够运行,但浏览器中报错req ...
vue3：vue3+vite+ts+pinia
一.背景记录一套技术方案. 二.项目基础 2.1.创建项目 yarn create vite 输入名字后,这里出现了几个选项,不清楚都是干啥的,下来研究选择后完成 2.2.vite.config. ...
vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
vue+ts项目中import图片时报错Cannot find module ‘xxx‘ or its corresponding type declarations
TS项目中import图片时报错Cannot find module 'xxx' or its corresponding type declarations 在vue+ts项目中使用import的形 ...
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结 1.需求背景最近在新项目搭建过程中有这样一个需求:由于是团队协同开发,所以在开发是代码规范是一个很重要的环 ...
Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...

在vue3+vite+ ts 项目中使用svg

一：components下新建svgIcon.vue文件

二：创建icons文件夹，存放svg文件

三：在main.ts里面全局注入svg-icon组件

四：在plugins文件夹创建svgBuilder.js

五: 最后在vite.config.ts修改配置

六：在页面中使用

在vue3+vite+ ts 项目中使用svg相关推荐

最新文章

热门文章

在vue3+vite+ ts 项目中使用svg

一：components下新建svgIcon.vue文件

二： 创建icons文件夹，存放svg文件

三：在main.ts里面全局注入svg-icon组件

四： 在plugins文件夹创建svgBuilder.js

五: 最后在vite.config.ts修改配置

六： 在页面中使用

在vue3+vite+ ts 项目中使用svg相关推荐

最新文章

热门文章

二：创建icons文件夹，存放svg文件

四：在plugins文件夹创建svgBuilder.js

六：在页面中使用