svg 更新

fis-conf.js

@@ -40,7 +40,13 @@ fis.match('/src/icons/**.svg', {
     isJsLike: true,
     isMod: true,
     parser: [
-        fis.plugin('svgr'),
+        fis.plugin('svgr', {
+            svgProps: {
+                class: "icon"
+            },
+            prettier: false,
+            dimensions: false
+        }),
         fis.plugin('typescript', {
             importHelpers: true,
             esModuleInterop: true,

scss/base/_normalize.scss

@@ -339,3 +339,11 @@ template {
 [hidden] {
     display: none;
 }
+
+
+svg.icon {
+    width: 1rem;
+    height: 1rem;
+    // top: 0.125rem;
+    // position: relative;
+}

src/components/icons.tsx

@@ -36,25 +36,25 @@ import PencilIcon from '../icons/pencil.svg';
 
 // 兼容原来的用法，后续不直接试用。
 // @ts-ignore
-export const closeIcon = <CloseIcon className="icon" />;
+export const closeIcon = <CloseIcon />;
 // @ts-ignore
-export const unDoIcon = <UnDoIcon className="icon" />;
+export const unDoIcon = <UnDoIcon />;
 // @ts-ignore
-export const reDoIcon = <ReDoIcon className="icon" />;
+export const reDoIcon = <ReDoIcon />;
 // @ts-ignore
-export const enterIcon = <EnterIcon className="icon" />;
+export const enterIcon = <EnterIcon />;
 // @ts-ignore
-export const volumeIcon = <VolumeIcon className="icon" />;
+export const volumeIcon = <VolumeIcon />;
 // @ts-ignore
-export const muteIcon = <MuteIcon className="icon" />;
+export const muteIcon = <MuteIcon />;
 // @ts-ignore
-export const playIcon = <PlayIcon className="icon" />;
+export const playIcon = <PlayIcon />;
 // @ts-ignore
-export const pauseIcon = <PauseIcon className="icon" />;
+export const pauseIcon = <PauseIcon />;
 // @ts-ignore
-export const leftArrowIcon = <LeftArrowIcon className="icon" />;
+export const leftArrowIcon = <LeftArrowIcon />;
 // @ts-ignore
-export const rightArrowIcon = <RightArrowIcon className="icon" />;
+export const rightArrowIcon = <RightArrowIcon />;
 
 const iconFactory: {
     [propName: string]: React.ReactType<{}>;

src/icons/minus.svg

@@ -1 +1,4 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568167473830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3585" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1024 511.994q0 9-6 15-6 5-14 5-328 0-984 0-11 0-16-7-4-7-4-13 0-7 6-14 6-7 14-7 123 0 369 0 205 0 615 0 8 0 14 6 6 6 6 15z" p-id="3586"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" version="1.1" p-id="1463">
+    <polygon id="path-1" points="4 10.6 4 9.4 16 9.4 16 10.6"></polygon>
+</svg>

src/icons/pencil.svg

@@ -1,3 +1,4 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1208" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M302.026 783.023q-0.761 0-2.282 0.761 88.25 0 352.999 0 6.847 0 11.412 4.565 4.565 4.565 4.565 10.651 0 6.847-4.565 11.412-4.565 4.565-11.412 4.565-156.72 0-470.919 0 0 0-0.761 0 0 0-0.761 0-1.522 0-2.282-0.761 0 0-0.761 0 0 0-0.761 0 0 0 0 0 0 0-0.761-0.761-0.761 0-1.522-0.761-0.761 0-1.522-0.761 0 0-0.761-0.761-0.761-0.761-2.282-2.282-0.761-1.522-1.522-2.282-0.761-0.761-0.761-1.522 0 0 0-0.761 0-0.761-0.761-0.761 0-0.761 0-1.522 0-0.761 0-2.282 0 0 0 0 0 0 0-0.761 0 0 0-0.761 0 0 0-1.522 0 0 0-0.761 0 0 0-0.761 0 0 0.761 0 0 0 0-0.761 7.608-28.909 30.431-115.638 1.522-3.804 4.565-6.847 160.523-159.002 481.57-477.006 4.565-4.565 10.651-4.565 6.847 0 11.412 4.565 4.565 4.565 4.565 10.651 0 6.847-4.565 11.412-159.763 158.241-478.527 473.962-6.086 21.302-23.584 85.968 22.062-5.325 86.728-22.823 119.442-118.681 478.527-473.962 4.565-4.565 10.651-4.565 6.847 0 11.412 4.565 4.565 4.565 4.565 10.651 0 6.847-4.565 11.412-160.523 159.002-482.331 477.006-2.282 3.043-6.847 3.804zM823.918 269.5q0.761-0.761 3.043-3.043 3.043-3.043 6.086-6.847 0.761-0.761 3.043-3.043 22.823-22.062 22.823-53.254 0-31.192-22.823-53.254-22.062-22.062-53.254-22.062-31.192 0-53.254 22.062-4.565 4.565-12.933 12.933 26.627 26.627 107.269 106.508zM166.608 798.999q0 0 0 0.761 0 0 0-0.761zM166.608 796.717q0 0 0 1.522 0 0 0-1.522zM166.608 801.281q0 0 0-1.522 0 0 0 1.522zM167.369 795.195q-0.761 0-0.761 0.761 0 0 0-0.761 0 0 0.761 0z" p-id="1209"></path>
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
+    <path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z" id="path-1"></path>
 </svg>

src/icons/plus.svg

@@ -1,3 +1,4 @@
-<svg t="1568167179945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2417" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M925.313 493.255c0 12.866-10.421 23.285-23.285 23.285h-349.522v349.533c0 12.853-10.421 23.285-23.285 23.285s-23.285-10.432-23.285-23.285v-349.533h-349.522c-12.866 0-23.285-10.421-23.285-23.285 0-12.853 10.421-23.285 23.285-23.285h349.522v-349.522c0-12.866 10.421-23.285 23.285-23.285s23.285 10.421 23.285 23.285v349.522h349.522c12.866 0 23.285 10.432 23.285 23.285z" p-id="2418" fill="#707070"></path>
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" version="1.1" p-id="1463">
+    <polygon id="path-1" points="10.6 10.6 10.6 16 9.4 16 9.4 10.6 4 10.6 4 9.4 9.4 9.4 9.4 4 10.6 4 10.6 9.4 16 9.4 16 10.6"></polygon>
 </svg>