feat: add SvgIcon component

CHANGELOG.zh_CN.md

@@ -3,6 +3,7 @@
 ### ✨ Features
 
 - `BasicTree` 新增`clickRowToExpand`,用于单击树节点展开
+- 新增 SvgIcon 插件及示例
 
 ### ⚡ Performance Improvements
 

build/vite/plugin/index.ts

@@ -16,6 +16,7 @@ import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
 import { configImageminPlugin } from './imagemin';
 import { configWindiCssPlugin } from './windicss';
+import { configSvgIconsPlugin } from './svgSprite';
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;
@@ -33,6 +34,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // vite-plugin-html
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
 
+  // vite-plugin-svg-icons
+  vitePlugins.push(configSvgIconsPlugin(isBuild));
+
   // vite-plugin-windicss
   vitePlugins.push(configWindiCssPlugin());
 

build/vite/plugin/svgSprite.ts

+/**
+ *  Vite Plugin for fast creating SVG sprites.
+ * https://github.com/anncwb/vite-plugin-svg-icons
+ */
+
+import SvgIconsPlugin from 'vite-plugin-svg-icons';
+import path from 'path';
+
+export function configSvgIconsPlugin(isBuild: boolean) {
+  const svgIconsPlugin = SvgIconsPlugin({
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    svgoOptions: isBuild,
+    // default
+    symbolId: 'icon-[dir]-[name]',
+  });
+  return svgIconsPlugin;
+}

package.json

@@ -53,7 +53,7 @@
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
-    "@iconify/json": "^1.1.311",
+    "@iconify/json": "^1.1.312",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.7.0",
     "@types/crypto-js": "^4.0.1",
@@ -101,7 +101,7 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.1",
-    "typescript": "4.2.2",
+    "typescript": "4.2.3",
     "vite": "^2.0.5",
     "vite-plugin-compression": "^0.2.3",
     "vite-plugin-html": "^2.0.3",
@@ -110,15 +110,16 @@
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-pwa": "^0.5.6",
     "vite-plugin-style-import": "^0.7.6",
+    "vite-plugin-svg-icons": "^0.1.2",
     "vite-plugin-theme": "^0.4.8",
-    "vite-plugin-windicss": "0.6.5",
+    "vite-plugin-windicss": "0.6.6",
     "vue-eslint-parser": "^7.6.0",
     "yargs": "^16.2.0"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "esbuild": "0.8.55",
+    "esbuild": "0.8.56",
     "rollup": "2.40.0"
   },
   "repository": {

src/assets/icons/test.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
+    <title>Icon1@3x</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="系统首页" transform="translate(-419.000000, -136.000000)" fill="#0593FF">
+            <g id="1" transform="translate(234.000000, 120.000000)">
+                <g id="Total-Users">
+                    <g id="Icon1" transform="translate(185.000000, 16.000000)">
+                        <path d="M23,60 C10.2974508,60 1.55561363e-15,49.7025492 0,37 L0,23 C-1.55561363e-15,10.2974508 10.2974508,2.33342044e-15 23,0 L37,0 C49.7025492,-2.33342044e-15 60,10.2974508 60,23 L60,37 C60,49.7025492 49.7025492,60 37,60 L23,60 Z" id="Circle-2" opacity="0.209999993"></path>
+                        <g id="Group" transform="translate(14.000000, 18.000000)" fill-rule="nonzero">
+                            <path d="M24,6.66666667 C26.209139,6.66666667 28,8.45752767 28,10.6666667 C28,12.8758057 26.209139,14.6666667 24,14.6666667 C21.790861,14.6666667 20,12.8758057 20,10.6666667 C20,8.45752767 21.790861,6.66666667 24,6.66666667 Z M12,0 C14.9455187,0 17.3333333,2.38781467 17.3333333,5.33333333 C17.3333333,8.278852 14.9455187,10.6666667 12,10.6666667 C9.05448133,10.6666667 6.66666667,8.278852 6.66666667,5.33333333 C6.66666667,2.38781467 9.05448133,0 12,0 Z" id="Combined-Shape" opacity="0.587820871"></path>
+                            <path d="M23.4686027,16.0012776 L23.3172917,16 C27.927838,16 31.7158139,18.2931929 31.9979916,23.2 C32.0092328,23.3954741 31.9979916,24 31.2745999,24 L26.1333333,24 L26.1333333,24 C26.1333333,20.9989578 25.1418595,18.2294867 23.4686027,16.0012776 Z M11.9777884,13.3333333 C18.3616218,13.3333333 23.6065116,16.3909238 23.9972191,22.9333333 C24.0127839,23.1939654 23.9972191,24 22.9955999,24 L0.97000297,24 L0.97000297,24 C0.635616207,24 -0.027282334,23.2789066 0.000868912387,22.932274 C0.517678033,16.5686878 5.6825498,13.3333333 11.9777884,13.3333333 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/Icon/index.ts

 import Icon from './src/index.vue';
+import SvgIcon from './src/SvgIcon.vue';
 // import IconPicker from './src/IconPicker.vue';
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
 const IconPicker = createAsyncComponent(() => import('./src/IconPicker.vue'));
 
-export { Icon, IconPicker };
+export { Icon, IconPicker, SvgIcon };
 
 export default Icon;

src/components/Icon/src/SvgIcon.vue

+<template>
+  <svg :class="[prefixCls, $attrs.class]" :style="getStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+<script lang="ts">
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, computed } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'SvgIcon',
+    props: {
+      prefix: {
+        type: String,
+        default: 'icon',
+      },
+      name: {
+        type: String,
+        required: true,
+      },
+      size: {
+        type: [Number, String],
+        default: 16,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('svg-icon');
+      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+
+      const getStyle = computed(
+        (): CSSProperties => {
+          const { size } = props;
+          let s = `${size}`;
+          s = `${s.replace('px', '')}px`;
+          return {
+            width: s,
+            height: s,
+          };
+        }
+      );
+      return { symbolId, prefixCls, getStyle };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-svg-icon';
+
+  .@{prefix-cls} {
+    overflow: hidden;
+    vertical-align: -0.15em;
+    fill: currentColor;
+  }
+</style>

src/main.ts

@@ -12,6 +12,8 @@ import { setupI18n } from '/@/locales/setupI18n';
 
 import { registerGlobComp } from '/@/components/registerGlobComp';
 
+import 'vite-plugin-svg-icons/register';
+
 import { isDevMode } from '/@/utils/env';
 
 (async () => {

src/views/demo/feat/icon/index.vue

@@ -21,6 +21,12 @@
       </div>
     </CollapseContainer>
 
+    <CollapseContainer title="svg Sprite" class="my-5">
+      <div class="flex justify-around flex-wrap">
+        <SvgIcon name="test" size="32" />
+      </div>
+    </CollapseContainer>
+
     <CollapseContainer title="图标选择器" class="my-5">
       <div class="flex justify-around flex-wrap">
         <IconPicker />
@@ -49,7 +55,7 @@
     CodepenCircleFilled,
   } from '@ant-design/icons-vue';
 
-  import { Icon, IconPicker } from '/@/components/Icon/index';
+  import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index';
 
   import { openWindow } from '/@/utils';
   import { PageWrapper } from '/@/components/Page';
@@ -68,6 +74,7 @@
       Icon,
       Alert,
       IconPicker,
+      SvgIcon,
     },
     setup() {
       return {