master

src/assets/svg/demo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1650508799437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1081" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M817.152 899.072H186.368c-12.288 0-22.528-8.192-22.528-20.48V153.6c0-10.24 10.24-20.48 22.528-20.48h630.784c12.288 0 22.528 8.192 22.528 20.48v724.992c0 10.24-10.24 20.48-22.528 20.48z m-608.256-40.96h587.776V172.032H208.896v686.08z m0 0" fill="#BBBBBB" p-id="1082"></path><path d="M593.92 448.512c-4.096 0-6.144 0-10.24-2.048l-79.872-47.104-79.872 47.104c-6.144 4.096-14.336 4.096-20.48 0-6.144-4.096-10.24-10.24-10.24-16.384V153.6c0-10.24 8.192-20.48 20.48-20.48H593.92c10.24 0 20.48 8.192 20.48 20.48V430.08c0 6.144-4.096 14.336-10.24 16.384-2.048 2.048-6.144 2.048-10.24 2.048z m-90.112-90.112c4.096 0 6.144 0 10.24 2.048l61.44 34.816V172.032h-141.312v223.232l61.44-34.816c2.048-2.048 4.096-2.048 8.192-2.048z m153.6 247.808H342.016c-10.24 0-20.48-8.192-20.48-20.48 0-10.24 8.192-20.48 20.48-20.48h315.392c10.24 0 20.48 8.192 20.48 20.48s-10.24 20.48-20.48 20.48z m-157.696 102.4h-157.696c-10.24 0-20.48-8.192-20.48-20.48 0-10.24 8.192-20.48 20.48-20.48h157.696c10.24 0 20.48 8.192 20.48 20.48s-10.24 20.48-20.48 20.48z m143.36 106.496c-43.008 0-77.824-34.816-77.824-77.824 0-43.008 34.816-77.824 77.824-77.824s77.824 34.816 77.824 77.824c0 43.008-34.816 77.824-77.824 77.824z m0-114.688c-20.48 0-36.864 16.384-36.864 36.864s16.384 36.864 36.864 36.864 36.864-16.384 36.864-36.864c2.048-18.432-16.384-36.864-36.864-36.864z m0 0" fill="#BBBBBB" p-id="1083"></path></svg>

src/components/index.js

@@ -0,0 +1,13 @@
+import svgIcon from './svg-icon.vue'
+
+const components = {
+	svgIcon,
+}
+
+export default{
+	install(Vue, opt){
+		for(var i in components){
+			Vue.component(i, components[i])
+		}
+	}
+}

src/components/svg-icon.vue

@@ -0,0 +1,27 @@
+<style scoped>
+	.svg-icon{
+		width: 1em;
+		height: 1em;
+		vertical-align: -0.15em;
+		fill: currentColor;
+		overflow: hidden;
+	}
+</style>
+<template>
+	<svg :class="svgClass" aria-hidden="true" v-on="$attrs" :style="{color: props.color}">
+		<use :xlink:href="iconName"/>
+	</svg>	
+</template>
+<script setup>
+import { computed } from "vue"
+	const props=defineProps({
+		name:String,
+		color:String,
+		className:String,
+	})
+	const iconName = computed(()=>`#icon-${props.name}`)
+	const svgClass = computed(()=>{
+		if(props.className)return `svg-icon icon-${props.anme}`
+		else return 'svg-icon'
+	})
+</script>

src/config/svgBuilder.js

@@ -0,0 +1,65 @@
+import { readFileSync, readdirSync } 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) => {
+            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)
+
+  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>
+        `
+      )
+    }
+  }
+}

src/main.js

@@ -2,11 +2,13 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from '@/store'
+import regComponents from '@/components'
 console.log(import.meta.env,'--------------import------')
 
 var app=createApp(App)
 app.use(router)
 	.use(store)
+	.use(regComponents)
 	.mount('#app')
 
 app.config.globalProperties.foo='===foo====' // 全局配置属性

src/views/Home.vue

@@ -3,11 +3,12 @@
 </style>
 <template>
   <div @click="$router.push({path:'/demo'})">demo</div>
+  svg-icon:<svg-icon name="demo"/>
   <img alt="Vue logo" src="~@/assets/img/logo.png" />
   <hello-world msg="Hello Vue 3 + Vite" :num='1' style="color:red;" class="hello">
     <div class="a">111</div>
     <template #demo>
-      <div>2222222</div>
+      <div>{{foo}}</div>
     </template>
   </hello-world>
 </template>

vite.config.js

@@ -1,9 +1,14 @@
 import { defineConfig } from 'vite'
 import path from 'path'
 import vue from '@vitejs/plugin-vue'
+import {svgBuilder} from './src/config/svgBuilder'
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    svgBuilder('./src/assets/svg/'),//提取导入svg文件
+  ],
   resolve:{
     alias:{
       "@":path.resolve(__dirname,'src'),
@@ -45,5 +50,14 @@ export default defineConfig({
         rewrite: path=>path.replace(/^\/api/,'')
       }
     },
+  },
+  pluginOptions:{
+    'style-resources-loader':{
+      preProcessor: 'less',
+      patterns:[
+        // 全局less文件
+        path.resolve(__dirname, 'assets/style/index.less')
+      ]
+    }
   }
 })