feat:x-icon

.prettierrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+    printWidth: 120,
+    tabWidth: 4,
+    useTabs: false,
+    semi: true,
+    singleQuote: true,
+    quoteProps: 'as-needed',
+    jsxSingleQuote: false,
+    trailingComma: 'es5',
+    bracketSpacing: true,
+    bracketSameLine: false,
+    arrowParens: 'always',
+    htmlWhitespaceSensitivity: 'ignore',
+    vueIndentScriptAndStyle: true,
+    endOfLine: 'auto',
+};

jsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        "allowSyntheticDefaultImports": true,
+        "moduleResolution": "Node",
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    },
+    "exclude": ["node_modules"]
+}

package.json

@@ -1,28 +1,37 @@
 {
-  "name": "russia-block",
+    "name": "russia-block",
-  "private": true,
+    "private": true,
-  "version": "0.0.0",
+    "version": "0.0.0",
-  "scripts": {
+    "scripts": {
-    "dev": "vite",
+        "dev": "vite",
-    "build": "vite build",
+        "build": "vite build",
-    "preview": "vite preview"
+        "preview": "vite preview"
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "vue": "^3.2.25"
+        "@element-plus/icons": "^0.0.11",
-  },
+        "axios": "^0.26.1",
-  "devDependencies": {
+        "dayjs": "^1.11.0",
-    "@originjs/vite-plugin-global-style": "^1.0.2",
+        "element-plus": "^2.1.2",
-    "@types/node": "^17.0.21",
+        "lodash": "^4.17.21",
-    "@vitejs/plugin-legacy": "^1.7.1",
+        "qs": "^6.10.3",
-    "@vitejs/plugin-vue": "^2.2.0",
+        "sortablejs": "^1.14.0",
-    "@vitejs/plugin-vue-jsx": "^1.3.8",
+        "vue": "^3.2.25",
-    "consola": "^2.15.3",
+        "vue-router": "^4.0.14",
-    "less": "^4.1.2",
+        "vuex": "^4.0.2"
-    "unplugin-auto-import": "^0.6.4",
+    },
-    "unplugin-vue-components": "^0.18.0",
+    "devDependencies": {
-    "vite": "^2.8.0",
+        "@originjs/vite-plugin-global-style": "^1.0.2",
-    "vite-plugin-remove-console": "^0.0.6",
+        "@types/node": "^17.0.21",
-    "vite-plugin-style-import": "^2.0.0",
+        "@vitejs/plugin-legacy": "^1.7.1",
-    "vite-plugin-svg-icons": "^2.0.1"
+        "@vitejs/plugin-vue": "^2.2.0",
-  }
+        "@vitejs/plugin-vue-jsx": "^1.3.8",
+        "consola": "^2.15.3",
+        "less": "^4.1.2",
+        "unplugin-auto-import": "^0.6.4",
+        "unplugin-vue-components": "^0.18.0",
+        "vite": "^2.8.0",
+        "vite-plugin-remove-console": "^0.0.6",
+        "vite-plugin-style-import": "^2.0.0",
+        "vite-plugin-svg-icons": "^2.0.1"
+    }
 }

src/App.vue

@@ -1,8 +1,10 @@
 <template>
     <div id="app">
         <h1>
-            <SvgIcon name="vue" color="red" size="30"></SvgIcon><span>马士兵严选</span
+            <span>马士兵严选</span>
-            ><SvgIcon name="msb" size="30"></SvgIcon>
+            <XIcon name="vue" svg color="red" size="30" />
+            <XIcon name="msb" svg size="30"></XIcon>
+            <XIcon name="app-store" size="30" />
         </h1>
     </div>
 </template>

src/components.d.ts

@@ -4,7 +4,9 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     SvgIcon: typeof import('./components/SvgIcon.vue')['default']
+    XIcon: typeof import('./components/XIcon.vue')['default']
   }
 }
 

src/components/SvgIcon.vue

@@ -1,42 +0,0 @@
-<template>
-    <svg class="svg-icon" aria-hidden="true">
-        <use :href="symbolId" :fill="color" />
-    </svg>
-</template>
-
-<script>
-    export default defineComponent({
-        name: 'SvgIcon',
-        props: {
-            prefix: {
-                type: String,
-                default: 'icon',
-            },
-            name: {
-                type: String,
-                required: true,
-            },
-            color: {
-                type: String,
-                default: '#333',
-            },
-            size: {
-                type: [Number, String],
-                default: 16,
-            },
-        },
-        setup(props) {
-            const symbolId = computed(() => `#${props.prefix}-${props.name}`);
-            const size = computed(() =>
-                typeof new Number(props.size) !== Number.NaN ? props.size + 'px' : props.size
-            );
-            return { symbolId, size };
-        },
-    });
-</script>
-<style lang="less" scoped>
-    .svg-icon {
-        width: v-bind(size);
-        height: v-bind(size);
-    }
-</style>

src/components/XIcon.vue

@@ -0,0 +1,58 @@
+<template>
+    <template v-if="name">
+        <i v-if="isRemix" class="x-icon" :class="'x-icon-' + name" v-bind="{ ...$props, ...$attrs }"></i>
+        <svg v-else-if="svg" class="x-icon" aria-hidden="true">
+            <use :href="symbolId" :fill="color" />
+        </svg>
+        <el-icon v-else class="x-icon">
+            <component :is="name" v-bind="{ ...$props, ...$attrs }" />
+        </el-icon>
+    </template>
+</template>
+<script>
+    export default defineComponent({
+        name: 'XIcon',
+        props: {
+            name: {
+                type: String,
+                default: '',
+            },
+            size: {
+                type: [String, Number],
+                default: 14,
+            },
+            svg: {
+                type: Boolean,
+                default: false,
+            },
+            color: {
+                type: String,
+                default: 'inherit',
+            },
+        },
+        setup(props) {
+            const symbolId = computed(() => `#icon-${props.name}`);
+            const size = computed(() =>
+                typeof new Number(props.size) !== Number.NaN ? props.size + 'px' : props.size
+            );
+            const isRemix = computed(() => props.name.indexOf('-') !== -1 || props.isCustomSvg);
+            return {
+                symbolId,
+                size,
+                color: props.color,
+                isRemix,
+            };
+        },
+    });
+</script>
+
+<style lang="less" scoped>
+    .x-icon {
+        font-size: v-bind(size);
+        color: v-bind(color);
+    }
+    svg.x-icon {
+        width: v-bind(size);
+        height: v-bind(size);
+    }
+</style>

src/icons/index.js

@@ -0,0 +1,2 @@
+import 'virtual:svg-icons-register';
+import '@/icons/remixicon.less';

src/icons/utils.js

@@ -0,0 +1,4 @@
+const fs = require('fs');
+let data = fs.readFileSync('./remixicon.less').toString();
+let res = data.match(/(?<=\.x-icon-).*?(?=:before)/g);
+fs.writeFileSync('index.json', JSON.stringify(res));

src/main.js

@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 
-import 'virtual:svg-icons-register';
+import '@/icons';
 
 createApp(App).mount('#app');

vite.config.ts

@@ -30,7 +30,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
             vue(),
             vueJsx(),
             createSvgIconsPlugin({
-                iconDirs: [resolve(process.cwd(), 'src/icons')],
+                iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
                 symbolId: 'icon-[dir]-[name]',
             }),
             createStyleImportPlugin({