diff --git a/web/src/components/svgIcon/svgIcon.vue b/web/src/components/svgIcon/svgIcon.vue new file mode 100644 index 000000000..d05f87295 --- /dev/null +++ b/web/src/components/svgIcon/svgIcon.vue @@ -0,0 +1,39 @@ + + + diff --git a/web/src/core/global.js b/web/src/core/global.js index de798a1bd..04b5af174 100644 --- a/web/src/core/global.js +++ b/web/src/core/global.js @@ -3,26 +3,14 @@ import { h } from 'vue' // 统一导入el-icon图标 import * as ElIconModules from '@element-plus/icons-vue' +import svgIcon from '@/components/svgIcon/svgIcon.vue' // 导入转换图标名称的函数 -const createIconComponent = (svgContent) => ({ +const createIconComponent = (name) => ({ name: 'SvgIcon', - props: { - iconClass: { - type: String, - default: '', - }, - className: { - type: String, - default: '', - }, - }, render() { - const { className } = this - return h('span', { - class: className, - ariaHidden: true, - innerHTML: svgContent, + return h(svgIcon, { + name: name, }) }, }) @@ -30,15 +18,14 @@ const createIconComponent = (svgContent) => ({ const registerIcons = async(app) => { const iconModules = import.meta.glob('@/assets/icons/**/*.svg') for (const path in iconModules) { - const response = await fetch(path) - const svgContent = await response.text() const iconName = path.split('/').pop().replace(/\.svg$/, '') // 如果iconName带空格则不加入到图标库中并且提示名称不合法 + console.log(iconName) if (iconName.indexOf(' ') !== -1) { console.error(`icon ${iconName}.svg includes whitespace`) continue } - const iconComponent = createIconComponent(svgContent) + const iconComponent = createIconComponent(iconName) config.logs.push({ 'key': iconName, 'label': iconName, @@ -52,6 +39,7 @@ export const register = (app) => { for (const iconName in ElIconModules) { app.component(iconName, ElIconModules[iconName]) } + app.component('SvgIcon', svgIcon) registerIcons(app) app.config.globalProperties.$GIN_VUE_ADMIN = config } diff --git a/web/src/style/main.scss b/web/src/style/main.scss index 4976e741f..b35c7acae 100644 --- a/web/src/style/main.scss +++ b/web/src/style/main.scss @@ -688,3 +688,6 @@ li { #nprogress .bar { background: #29d !important; } +.gva-customer-icon{ + @apply w-4 h-4; +} diff --git a/web/src/view/login/index.vue b/web/src/view/login/index.vue index 8c072cba0..d321640c6 100644 --- a/web/src/view/login/index.vue +++ b/web/src/view/login/index.vue @@ -12,6 +12,7 @@
+ 39', 'Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15'], }), vuePlugin(), + svgBuilder('./src/assets/icons/'), [Banner(`\n Build based on gin-vue-admin \n Time : ${timestamp}`)] ], css: { diff --git a/web/vitePlugin/svgIcon/svgIcon.js b/web/vitePlugin/svgIcon/svgIcon.js new file mode 100644 index 000000000..9a24b3b36 --- /dev/null +++ b/web/vitePlugin/svgIcon/svgIcon.js @@ -0,0 +1,61 @@ +import { readFileSync, readdirSync } from 'fs' +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) => { + if (path === '') return + const res = findSvgFile(path) + // console.log(res.length) + // const res = [] + return { + name: 'svg-transform', + transformIndexHtml(html) { + return html.replace( + '', + ` + + + ${res.join('')} + + ` + ) + } + } +}