使用svg显示图片

src/index.less

 @import './normalize.less';
 @import '~antd/dist/antd.less';
 @import './mixins.less';
+@import './variables.less';
 
 // @tailwind base;
 @tailwind components;
@@ -298,3 +299,43 @@ tr.drop-over-upward td {
     background-color: #F6F6F6 !important;
   }
 }
+
+.yy-btn, .anticon {
+   svg {
+    fill: @icon-color !important;
+  }
+
+  &:hover {
+    svg {
+      fill: @icon-hover-color !important;
+    }
+  }
+}
+
+.anticon-disable {
+  svg {
+    fill: @icon-disable-color !important;
+  }
+
+  &:hover {
+    svg {
+      fill: @icon-disable-color !important;
+    }
+  }
+}
+
+.primary-bg-container {
+  background-color: #196AD2;
+
+  .yy-btn {
+    svg {
+      fill: @icon-grey-color !important;
+    }
+  
+    &:hover {
+      svg {
+        fill: #fff !important;
+      }
+    }
+  }
+}
\ No newline at end of file

src/variables.less

@@ -2,3 +2,8 @@
 @pm-4: 30px;
 @pm-3: 20px;
 @scroll-height: 15px;
+
+@icon-color: #6F6F6F;
+@icon-hover-color: #196AD2;
+@icon-grey-color: #D5D5D5;
+@icon-disable-color: #bfbfbf;
\ No newline at end of file

src/view/Manage/AssetManage/Component/AssetAction.jsx

@@ -11,11 +11,7 @@ import { AppContext } from '../../../../App';
 import Tag from '../../Tag';  
 import Separate from './Separate';
 
-import cancelImg from '../Assets/cancel.png';
-import editImg from '../Assets/edit.png';
-import saveImg from '../Assets/save.png';
-import fullImg from '../Assets/full.png';
-import cancelFullImg from '../Assets/cancel_full.png';
+import { CancelSvg, EditSvg, SaveSvg, FullScreenSvg, CancelFullScreenSvg } from './AssetSvg';
 
 const AssetAction = (props) => {
   const { id, dirId, action, terms, onChange, readOnly = false, form, onMetadataChange, onElementsChange } = props;
@@ -247,7 +243,7 @@ const AssetAction = (props) => {
     >
       {
         (!readOnly&&action!=='add') && <div
-          className='flex px-common primary-bg-color'
+          className='flex px-common primary-bg-container'
           style={{
             height: 46,
             alignItems: 'center',
@@ -261,7 +257,7 @@ const AssetAction = (props) => {
               (currentAction!=='detail') && <Tooltip title='取消编辑'>
                 <Button 
                   onClick={onCancelButtonClick} 
-                  icon={<img src={cancelImg} width={20} alt='' />} 
+                  icon={<CancelSvg style={{ width: 20, height: 20 }} />} 
                   type='text' 
                 />
               </Tooltip>
@@ -270,14 +266,14 @@ const AssetAction = (props) => {
               <Button 
                 loading={confirmLoading} 
                 onClick={onActionButtonClick}
-                icon={<img src={(currentAction==='detail')?editImg:saveImg} width={20}  alt='' />}
+                icon={(currentAction==='detail')?<EditSvg style={{ width: 20, height: 20 }} />: <SaveSvg style={{ width: 20, height: 20 }} />}
                 type='text'  
               />
             </Tooltip>
             <Tooltip title={fullScreen?'取消全屏':'全屏'}>
               <Button 
                 onClick={onFullScreenClick}
-                icon={<img src={fullScreen?cancelFullImg:fullImg} width={20}  alt='' />}
+                icon={fullScreen?<CancelFullScreenSvg style={{ width: 20, height: 20 }} />: <FullScreenSvg style={{ width: 20, height: 20 }} />}
                 type='text'  
               />
             </Tooltip>

src/view/Manage/AssetManage/Component/AssetDirectory.jsx

@@ -7,10 +7,11 @@ import ImportElement from './ImportElement';
 import AttributeRelationModal from "./AttributeRelationModal";
 import FilterElementModal from './FilterElementModal';
 import { showNotifaction } from '../../../../util';
-
-import more from '../Assets/more_h.png';
+import { MoreSvg } from './AssetSvg';
 import record from '../Assets/record.png'; 
 
+import './AssetDirectory.less';
+
 const { Paragraph, Text } = Typography;
 
 const AssetDirectory = (props) => {
@@ -109,7 +110,7 @@ const AssetDirectory = (props) => {
   return (
     <Spin spinning={loading}>
       <div
-        className='flex p-common'
+        className='flex p-common asset-directory'
         style={{
           alignItems: 'center',
           justifyContent: 'space-between',
@@ -184,7 +185,7 @@ const AssetDirectory = (props) => {
         {
           (reference===AssetManageReference) && <Dropdown overlay={elementManageMenu} placement="bottomCenter">
             <div
-              className='flex primary-color'
+              className='flex more-container'
               style={{
                 flexDirection: 'column',
                 alignItems: 'center',
@@ -192,7 +193,7 @@ const AssetDirectory = (props) => {
                 marginBottom: 58,
               }}
             >
-              <img src={more} style={{ width: 20, height: 20 }} alt="" />
+              <MoreSvg style={{ width: 20, height: 20, marginBottom: 5 }} />
               <span style={{ fontSize: 10 }}>更多</span>
             </div>
           </Dropdown>

src/view/Manage/AssetManage/Component/AssetDirectory.less

+@import '../../../../variables.less'; 
+
+
+.asset-directory {
+  .more-container {
+    cursor: pointer;
+    color: @icon-color;
+
+    .icon {
+      fill: @icon-color;
+    }
+
+    &:hover {
+      color: @icon-hover-color;
+
+      .icon {
+        fill: @icon-hover-color;
+      }
+    }
+  }
+}
\ No newline at end of file

src/view/Manage/AssetManage/Component/AssetSvg.jsx

+
+export const SaveSvg = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1073 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={209.57}
+    height={200}
+    {...props}
+  >
+    <path
+      d="M190.526 1024h691.892a190.783 190.783 0 0 0 191.04-190.527V190.526A190.783 190.783 0 0 0 882.802 0H190.91A190.783 190.783 0 0 0 0 190.526v642.947A190.783 190.783 0 0 0 190.526 1024zm0-939.564h25.626V343.64A145.81 145.81 0 0 0 362.218 489.32h350.943A145.81 145.81 0 0 0 858.458 343.64V84.436h24.345a106.218 106.218 0 0 1 106.218 106.09v642.947a106.346 106.346 0 0 1-106.218 106.09H190.91a106.218 106.218 0 0 1-106.09-106.09V190.526a106.09 106.09 0 0 1 105.705-106.09zm110.447 6.407h474.074V343.64a61.373 61.373 0 0 1-61.245 61.245H362.218a61.245 61.245 0 0 1-61.245-61.245z"
+    />
+    <path
+      d="M693.814 397.197a42.154 42.154 0 0 0 42.282-42.154V201.289a42.282 42.282 0 0 0-84.437 0v153.754a42.154 42.154 0 0 0 42.155 42.154z"
+    />
+  </svg>
+)
+
+export const EditSvg = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={200}
+    height={200}
+    {...props}
+  >
+    <path d="m465.654 852.308 429.529-509.401c27.574-32.622 23.301-81.943-9.321-109.388L727.669 99.922c-32.622-27.574-81.943-23.301-109.388 9.321L188.623 618.644l-24.854 271.595c-.907 9.968 3.107 19.807 10.745 26.279s17.994 8.803 27.703 6.213l263.439-70.422zM587.213 242.32l182.141 153.533-311.077 368.944-182.141-153.662 311.077-368.814zm100.327-94.888 158.322 133.467c6.473 5.438 7.249 15.405 1.812 21.878l-38.577 45.826L627.085 195.07l38.577-45.826c5.438-6.473 15.534-7.249 21.878-1.812zM229.014 851.79l16.959-184.731 162.335 136.833-179.293 47.899z" />
+  </svg>
+)
+
+export const FullScreenSvg = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={200}
+    height={200}
+    {...props}
+  >
+    <path
+      d="M285.867 810.667H384v42.666H213.333V682.667H256V780.8l128-128 29.867 29.867-128 128zm494.933 0-128-128 29.867-29.867 128 128v-98.133h42.666v170.666H682.667v-42.666H780.8zM285.867 256l128 128L384 413.867l-128-128V384h-42.667V213.333H384V256h-98.133zm494.933 0h-98.133v-42.667h170.666V384h-42.666v-98.133l-128 128L652.8 384l128-128z"
+    />
+  </svg>
+)
+
+export const CancelFullScreenSvg = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={200}
+    height={200}
+    {...props}
+  >
+    <path
+      d="M354.133 682.667H256V640h170.667v170.667H384v-98.134l-140.8 140.8-29.867-29.866 140.8-140.8zm358.4 0 140.8 140.8-29.866 29.866-140.8-140.8v98.134H640V640h170.667v42.667h-98.134zM354.133 384l-140.8-140.8 29.867-29.867 140.8 140.8V256h42.667v170.667H256V384h98.133zm358.4 0h98.134v42.667H640V256h42.667v98.133l140.8-140.8 29.866 29.867-140.8 140.8z"
+    />
+  </svg>
+)
+
+export const CancelSvg = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={200}
+    height={200}
+    {...props}
+  >
+    <path d="M926.3 337.9c-22.6-53.3-54.8-101.2-96-142.3-41.1-41.1-89-73.4-142.3-96-55.2-23.4-113.9-35.2-174.3-35.2S394.6 76.2 339.3 99.6c-53.3 22.6-101.2 54.8-142.3 96-41.1 41.1-73.4 89-96 142.3-23.4 55.2-35.2 113.9-35.2 174.3 0 60.4 11.8 119.1 35.2 174.3 22.6 53.3 54.8 101.2 96 142.3 41.1 41.1 89 73.4 142.3 96 55.2 23.4 113.9 35.2 174.3 35.2s119.1-11.8 174.3-35.2c53.3-22.6 101.2-54.8 142.3-96 41.1-41.1 73.4-89 96-142.3 23.4-55.2 35.2-113.9 35.2-174.3.1-60.4-11.8-119.1-35.1-174.3zM513.7 879.1c-202.3 0-366.9-164.6-366.9-366.9s164.6-366.9 366.9-366.9c202.3 0 366.9 164.6 366.9 366.9S716 879.1 513.7 879.1z" />
+    <path d="M697.9 329.1c-15.6-15.6-41-15.6-56.6 0L513 457.4 384.7 329.1c-15.6-15.6-41-15.6-56.6 0-15.6 15.6-15.6 41 0 56.6L456.4 514 328.1 642.3c-15.6 15.6-15.6 41 0 56.6 15.6 15.6 41 15.6 56.6 0L513 570.6l128.3 128.3c15.6 15.6 41 15.6 56.6 0 15.6-15.6 15.6-41 0-56.6L569.6 514l128.3-128.3c15.6-15.6 15.6-41.1 0-56.6z" />
+  </svg>
+)
+
+export const MoreSvg = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1037 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={202.539}
+    height={200}
+    {...props}
+  >
+    <path d="M344.324 497.873H126.663A126.855 126.855 0 0 1 .003 370.238V153.55a126.855 126.855 0 0 1 126.66-126.66h217.66a126.855 126.855 0 0 1 126.66 126.66v216.687a126.855 126.855 0 0 1-126.66 127.635zM126.663 85.35A68.202 68.202 0 0 0 58.46 153.55v216.687a68.202 68.202 0 0 0 68.202 68.202h217.66a68.202 68.202 0 0 0 68.202-68.202V153.55a68.202 68.202 0 0 0-68.201-68.201zM344.323 1024h-217.66A126.855 126.855 0 0 1 .003 896.365V679.68a126.855 126.855 0 0 1 126.66-126.66h217.66a126.855 126.855 0 0 1 126.66 126.66v216.686A126.855 126.855 0 0 1 344.324 1024zm-217.66-412.523A68.202 68.202 0 0 0 58.46 679.68v216.686a68.202 68.202 0 0 0 68.202 68.202h217.66a68.202 68.202 0 0 0 68.202-68.202V679.68a68.202 68.202 0 0 0-68.201-68.202zM883.312 1024H665.846a126.855 126.855 0 0 1-126.66-126.66V679.679a126.855 126.855 0 0 1 126.66-126.66h217.466a126.855 126.855 0 0 1 126.66 126.66v216.686A126.855 126.855 0 0 1 883.312 1024zM665.846 611.477a68.202 68.202 0 0 0-68.202 68.202v216.686a68.202 68.202 0 0 0 68.202 68.202h217.466a68.202 68.202 0 0 0 68.202-68.202V679.68a68.202 68.202 0 0 0-68.202-68.202zm108.733-86.714a125.686 125.686 0 0 1-89.637-37.023L548.54 351.336a126.855 126.855 0 0 1 0-179.078L684.942 35.855a126.855 126.855 0 0 1 179.079 0l136.403 136.403a126.855 126.855 0 0 1 0 179.078L864.021 487.74a125.686 125.686 0 0 1-89.442 37.023zm0-466.304a68.007 68.007 0 0 0-48.326 19.486L589.85 214.348a68.202 68.202 0 0 0 0 96.457l136.403 136.403a70.15 70.15 0 0 0 96.457 0l136.403-136.403a68.397 68.397 0 0 0 0-96.457L822.71 77.945a68.007 68.007 0 0 0-48.131-19.486z" />
+  </svg>
+)

src/view/Manage/AssetManage/Component/AssetTable.jsx

@@ -14,8 +14,7 @@ import { dispatch, dispatchLatestHomepage } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
 import { AnchorId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant';
 
-import FullScreenImg from '../Assets/full.png';
-import CancelFullScreenImg from '../Assets/cancel_full.png';
+import { FullScreenSvg, CancelFullScreenSvg } from './AssetSvg';
 
 import "./AssetTable.less";
 
@@ -568,7 +567,7 @@ const AssetTable = (props) => {
             style={{ width: inputWidth }}
           />
           <Tooltip title={fullScreen?'取消全屏':'全屏'}>
-            <Button onClick={onFullScreenClick} icon={<img src={fullScreen?CancelFullScreenImg:FullScreenImg} width={20} height={20} alt='' />} type='text'></Button>
+            <Button onClick={onFullScreenClick} icon={fullScreen?<CancelFullScreenSvg style={{ width: 20, height: 20 }} />:<FullScreenSvg style={{ width: 20, height: 20 }} />} type='text'></Button>
           </Tooltip>
         </Space>
       </div>

src/view/Manage/AssetManage/Component/AssetTree.jsx

@@ -574,7 +574,7 @@ const AssetTree = (props) => {
           }}
         >
           <Tooltip title="新增目录">
-            <PlusOutlined onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer', color: (currentDirType==='custom-root'||currentDirType==='custom')?'#bfbfbf': '' }}/>
+            <PlusOutlined className={(currentDirType==='custom-root'||currentDirType==='custom')?'anticon-disable': ''} onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer' }}/>
           </Tooltip>
           <Tooltip title="修改目录">
             <EditOutlined onClick={editDir} style={{ fontSize:16,cursor: 'pointer' }} />
@@ -583,7 +583,7 @@ const AssetTree = (props) => {
             <ReloadOutlined onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
           <Tooltip title="导入目录">
-            <ImportOutlined onClick={importDir} style={{ fontSize:16,cursor:(currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer', color: (currentDirType==='custom-root'||currentDirType==='custom')?'#bfbfbf': '' }} />
+            <ImportOutlined className={(currentDirType==='custom-root'||currentDirType==='custom')?'#anticon-disable': ''} onClick={importDir} style={{ fontSize:16,cursor:(currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer' }} />
           </Tooltip>
           <Dropdown overlay={exportMenu} placement="bottomLeft" >
             <Tooltip title="导出目录">
@@ -597,7 +597,7 @@ const AssetTree = (props) => {
             <ArrowDownOutlined onClick={() => { moveNode(-1); }} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
           <Tooltip title="删除目录">
-            <DeleteOutlined onClick={deleteDir} style={{ fontSize:16,cursor:(currentDirType==='custom')?'not-allowed':'pointer', color: (currentDirType==='custom')?'#bfbfbf': '' }} />
+            <DeleteOutlined className={(currentDirType==='custom')?'#anticon-disable': ''} onClick={deleteDir} style={{ fontSize:16,cursor:(currentDirType==='custom')?'not-allowed':'pointer' }} />
           </Tooltip>
           <Tooltip title="自定义目录">
             <SettingOutlined onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />