vue3 自定义组件 (svg-icon) 以及全局引入 自定义组件

2023-12-13 04:53:51
  1. 安装 svg-sprite-loader
npm install svg-sprite-loader -D

yarn add svg-sprite-loader -D
  1. 在src下创建文件夹 plugins，在plugins文件夹下创建 svgBuilder.js
import {readdirSync, readFileSync} from 'fs'

let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
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 `<symbol id="${idPerfix}-${dirent.name.replace(
                        '.svg',
                        ''
                    )}" ${content}>`
                })
                .replace('</svg>', '</symbol>')
            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(
                '<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>
        `
            )
        }
    }
}
  1. vite.config.js 中添加配置信息
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { svgBuilder } from './src/plugins/svgBuilder.js';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        svgBuilder('./src/assets/icons/svg/')  // 自动解析这个文件夹下的svg图标
    ],
    resolve: {
        alias: {
            "@": path.resolve("./src")
        }
    }
})
  1. 自定义 SvgIcon 组件 /src/components/SvgIcon/index.vue

要确保你的 /src/assets/icons/svg/ 文件夹下有可以使用的 svg 图标

<script setup>
import {ref} from "vue";

const props = defineProps({
  prefix: {
    type: String,
    default: '#icon-'
  },
  name: String,
  width: {
    type: String,
    default: '20px',
  },
  height: {
    type: String,
    default: '20px'
  },
  color: {
    type: String,
    default: ''
  }
})
const style = ref({
  width: props.width,
  height: props.height
})

</script>
<template>
  <svg :style="style">
    <use :href="prefix+name" :fill="color"></use>
  </svg>
</template>
  1. 全局引入 自定义组件的文件 /src/components/index.js
import SvgIcon from '@/components/SvgIcon/index.vue'

// 收集要注册的组件
const allComponents={
    SvgIcon
}
export default {
	// 在main.js中 import allComponents from '@/components'
	// 然后 使用app.use(allComponents)，install(app) 会自动传入一个app对象
	// 这个方法名必须是 install
    install(app){
        // 完成组件的统一注册
        Object.keys(allComponents).forEach(key=>{
            app.component(key,allComponents[key])
            // console.log(key,allComponents[key])
        })
    }
}
  1. main.js 引入 全局注册 自定义组件的文件
import allComponents from '@/components'

const app = createApp(App)
app.use(allComponents)
app.mount('#app')
  1. 自定义组件 测试使用

要确保你的 /src/assets/icons/svg/ 文件夹下有可以使用的 svg 图标

<template>
  <svg-icon name="add" color="green" width="100px" height="100px"></svg-icon>
</template>

注意：如果 color 不生效，记得把 下载的svg 图标代码 的 fill 属性去掉。

文章来源:https://blog.csdn.net/qq_58706693/article/details/134897747
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。