From a2269bcdd5e782215dbfe399d89045259340dd9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=87=E6=B7=BC=EF=BC=88piexlmax?= <303176530@qq.com> Date: Tue, 16 Jan 2024 22:07:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E4=B8=8A=E7=BA=BF=E5=90=8E=E6=97=A0=E6=B3=95=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E3=80=82=20(#1625)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 修改自定义图标使用方式 * 优化自定义icon功能 --- web/src/components/svgIcon/svgIcon.vue | 39 ++++++++++++++++ web/src/core/global.js | 26 +++-------- web/src/style/main.scss | 3 ++ web/src/view/login/index.vue | 1 + web/vite.config.js | 2 + web/vitePlugin/svgIcon/svgIcon.js | 61 ++++++++++++++++++++++++++ 6 files changed, 113 insertions(+), 19 deletions(-) create mode 100644 web/src/components/svgIcon/svgIcon.vue create mode 100644 web/vitePlugin/svgIcon/svgIcon.js 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('')} + + ` + ) + } + } +}