first

2024-02-19 13:44:32 +08:00
commit 361cbb713d
238 changed files with 202544 additions and 0 deletions
--- a/src/components/icon/index.vue
+++ b/src/components/icon/index.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { createVNode, resolveComponent, defineComponent, computed, type CSSProperties } from 'vue'
+import svg from '@/components/icon/svg/index.vue'
+import { isExternal } from '@/utils/common'
+export default defineComponent({
+    name: 'Icon',
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        size: {
+            type: String,
+            default: '18px'
+        },
+        color: {
+            type: String,
+            default: '#000000'
+        }
+    },
+    setup(props) {
+        const iconStyle = computed((): CSSProperties => {
+            const { size, color } = props
+            let s = `${size.replace('px', '')}px`
+            return {
+                fontSize: s,
+                color: color
+            }
+        })
+
+        if (props.name.indexOf('el-icon-') === 0) {
+            return () =>
+                createVNode('el-icon', { class: 'icon el-icon', style: iconStyle.value }, [
+                    createVNode(resolveComponent(props.name))
+                ])
+        } else if (props.name.indexOf('local-') === 0 || isExternal(props.name)) {
+            return () => createVNode(svg, { name: props.name, size: props.size, color: props.color })
+        } else {
+            return () => createVNode('i', { class: [props.name, 'icon'], style: iconStyle.value })
+        }
+    }
+})
+</script>
--- a/src/components/icon/svg/index.ts
+++ b/src/components/icon/svg/index.ts
@@ -0,0 +1,71 @@
+import { readFileSync, readdirSync } from 'fs'
+
+let idPerfix = ''
+const iconNames: string[] = []
+const svgTitle = /<svg([^>+].*?)>/
+const clearHeightWidth = /(width|height)="([^>+].*?)"/g
+const hasViewBox = /(viewBox="[^>+].*?")/g
+const clearReturn = /(\r)|(\n)/g
+// 清理 svg 的 fill
+const clearFill = /(fill="[^>+].*?")/g
+
+function findSvgFile(dir: string): string[] {
+    const svgRes = []
+    const dirents = readdirSync(dir, {
+        withFileTypes: true,
+    })
+    for (const dirent of dirents) {
+        iconNames.push(`${idPerfix}-${dirent.name.replace('.svg', '')}`)
+        if (dirent.isDirectory()) {
+            svgRes.push(...findSvgFile(dir + dirent.name + '/'))
+        } else {
+            const svg = readFileSync(dir + dirent.name)
+                .toString()
+                .replace(clearReturn, '')
+                .replace(clearFill, 'fill=""')
+                .replace(svgTitle, ($1, $2) => {
+                    let width = 0
+                    let height = 0
+                    let content = $2.replace(clearHeightWidth, (s1: string, s2: string, s3: number) => {
+                        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: string, perfix = 'local') => {
+    if (path === '') return
+    idPerfix = perfix
+    const res = findSvgFile(path)
+    return {
+        name: 'svg-transform',
+        transformIndexHtml(html: string) {
+            /* eslint-disable */
+            return html.replace(
+                '<body>',
+                `
+                <body>
+                <svg id="local-icon" data-icon-name="${iconNames.join(
+                    ','
+                )}" 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>
+                `
+            )
+            /* eslint-enable */
+        },
+    }
+}
--- a/src/components/icon/svg/index.vue
+++ b/src/components/icon/svg/index.vue
@@ -0,0 +1,49 @@
+<template>
+    <div v-if="isUrl" :style="urlIconStyle" class="url-svg svg-icon icon" />
+    <svg v-else class="svg-icon icon" :style="iconStyle">
+        <use :href="iconName" />
+    </svg>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { isExternal } from '@/utils/common'
+interface Props {
+    name: string
+    size: string
+    color: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    name: '',
+    size: '18px',
+    color: '#000000',
+})
+
+const s = `${props.size.replace('px', '')}px`
+const iconName = computed(() => `#${props.name}`)
+const iconStyle = computed((): CSSProperties => {
+    return {
+        color: props.color,
+        fontSize: s,
+    }
+})
+const isUrl = computed(() => isExternal(props.name))
+const urlIconStyle = computed(() => {
+    return {
+        width: s,
+        height: s,
+        mask: `url(${props.name}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${props.name}) no-repeat 50% 50%`,
+    }
+})
+</script>
+
+<style scoped>
+.svg-icon {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    overflow: hidden;
+}
+</style>