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

@@ -0,0 +1,17 @@
+/**
+ *  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/components/Icon/index.ts

@@ -1,9 +1,10 @@
 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

@@ -0,0 +1,54 @@
+<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 {