electron+vue3+vite+ts项目中使用svg图标

项目结构

1. 首先引入svg插件

yarn add svg-sprite-loader -D
// 或者
npm install svg-sprite-loader -D

2. 创建文件

1、创建icons文件夹，里面创建 index.ts(svgicon的js逻辑), svg文件夹(svg图标存放的地址)

》》index.ts

const {readFileSync, readdirSync} = require('fs')

let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g
const hasViewBox = /(viewBox="[^>+].*?")/g
const clearReturn = /(\r)|(\n)/g

// 查找svg文件
function svgFind(e) {
    const arr = []
    const dirents = readdirSync(e, {withFileTypes: true})
    for (const dirent of dirents) {
        if (dirent.isDirectory()) arr.push(...svgFind(e + dirent.name + '/'))
        else {
            const svg = readFileSync(e + dirent.name)
                .toString()
                .replace(clearReturn, '')
                .replace(svgTitle, ($1, $2) => {
                    let width = 0,
                        height = 0,
                        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>')
            arr.push(svg)
        }
    }
    return arr
}

const createSvg = (path, perfix = 'icon') => {
    if (path === '') return
    idPerfix = perfix
    const res = svgFind(path)
    return {
        name: 'svg-transform',
        transformIndexHtml(dom) {
            return dom.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>`
            )
        }
    }
}
// 生成svg
module.exports = createSvg

　　

2、创建组件里面index.vue(svgicon的模板文件)

》》SvgIcon.vue

<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: ''
  }
})
const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => {
  if (props.name) return `svg-icon icon-${props.name}`
  return 'svg-icon'
})
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

　　

3、vite.config.js配置文件加上index.ts的引用：

createSvg('src/renderer/assets/icons/svg/')
// ...
const createSvg = require('../src/renderer/assets/icons/index.ts')
// ...
const config = defineConfig({
    // ...
    plugins: [
     // ...
        createSvg('src/renderer/assets/icons/svg/')
    ],
// ...
})

module.exports = config

　　

4、shims-vue.d.ts 文件加上

declare module "*.svg" {
    const content: any;
    // @ts-ignore
    export default content;
}

　　

 

 

 5、main.ts文件中注册成全局组件

import { createApp } from 'vue'
import App from './App.vue'
import svgIcon from './components/SvgIcon.vue'
// ...
const app = createApp(App)
app.component('SvgIcon', svgIcon)
// ...

　　

 

 

 

使用

直接在name中使用文件名

<svg-icon name="close" color="red"/>

 

 

 

 

posted @ 2021-10-13 16:51  小林逸  阅读(787)  评论(0)    收藏  举报