🎈 perf(颜色取样): 新增图标

iconfont.json

@@ -1,5 +1,5 @@
 {
-    "symbol_url": "http://at.alicdn.com/t/c/font_3619513_kvbg4xjpk7.js",
+    "symbol_url": "http://at.alicdn.com/t/c/font_3619513_a8xfcrr18ef.js",
     "save_dir": "./src/components/iconfont",
     "trim_icon_prefix": "",
     "default_icon_size": 36,

src/components/iconfont/iconfont.tsx

@@ -24,7 +24,7 @@ function hex2rgb(hex) {
   return "rgb(" + rgb.join(",") + ")";
 }
 
-export type IconNames = 'icon-dianhua' | 'icon-peibu' | 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
+export type IconNames = 'icon-shangchuanwenli' | 'icon-gouwuche' | 'icon-zixun' | 'icon-dianhua' | 'icon-peibu' | 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
 
 type PropsType = {
   name: IconNames;
@@ -82,7 +82,16 @@ const IconFont:FC<PropsType> = ({
           className={classnames(icon, customClassName)}
         />
       )} */}
-      {/* icon-dianhua */}
+      {/* icon-shangchuanwenli */}
+
+      { name === 'icon-shangchuanwenli' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M883.2 176A28.8 28.8 0 0 1 912 204.8v261.2736a18.6368 18.6368 0 0 1-32 12.992l-27.9296-28.7232a14.4 14.4 0 0 1-4.0704-10.0352V240h-672v352l182.2336-174.6816a28.8 28.8 0 0 1 40.3712 0.512l139.9296 141.056a28.8 28.8 0 0 1 0 40.576l-6.1056 6.144a28.8256 28.8256 0 0 1-40.8832 0l-112.8832-113.7792L176 688v96h307.1872a28.8 28.8 0 0 1 28.8 28.8v6.4a28.8 28.8 0 0 1-28.8 28.8H140.8A28.8 28.8 0 0 1 112 819.2V204.8A28.8 28.8 0 0 1 140.8 176h742.4z m-118.8608 340.3136l117.1712 116.992a28.8 28.8 0 0 1 0 40.7552l-6.2848 6.272a28.8 28.8 0 0 1-40.704 0L777.6 623.488V819.2a28.8 28.8 0 0 1-28.8 28.8h-9.6A28.8 28.8 0 0 1 710.4 819.2V623.488L653.44 680.32a28.8 28.8 0 0 1-40.704 0l-6.2976-6.2848a28.8 28.8 0 0 1 0.0128-40.7552l117.1712-116.9792a28.8 28.8 0 0 1 40.704 0zM720 304c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(160,160,160)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
+{/* icon-gouwuche */}
+
+      { name === 'icon-gouwuche' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 12.510609a185.032348 185.032348 0 0 1 185.032348 185.076869v38.912h-58.457044v-38.956521c0-65.847652-50.309565-119.986087-114.554434-125.996522l-7.479653-0.489739L512 70.967652a126.619826 126.619826 0 0 0-126.619826 126.575305v38.956521H326.878609v-38.956521a185.032348 185.032348 0 0 1 175.860869-184.765218z m295.980522 224.033391c19.945739 0 36.685913 15.09287 38.733913 34.949565l69.89913 681.761392a38.956522 38.956522 0 0 1-38.733913 42.918956H146.120348a38.956522 38.956522 0 0 1-38.733913-42.918956l69.89913-681.761392a38.956522 38.956522 0 0 1 38.733913-34.949565h591.961044z m-17.630609 58.412522H233.605565l-65.892174 642.804869h688.573218l-65.892174-642.804869z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
+{/* icon-zixun */}
+
+      { name === 'icon-zixun' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 7.261091a412.485818 412.485818 0 0 1 407.598545 349.463273l-5.585454-0.186182a107.054545 107.054545 0 0 1 107.054545 107.054545v210.850909a107.054545 107.054545 0 0 1-107.054545 107.054546h-40.401455a107.054545 107.054545 0 0 1-107.054545-107.054546V463.592727c0-53.713455 39.563636-98.210909 91.229091-105.890909a351.278545 351.278545 0 0 0-691.665455 0.093091A107.008 107.008 0 0 1 257.489455 463.592727v210.850909a107.101091 107.101091 0 0 1-84.48 104.680728 160.581818 160.581818 0 0 0 148.48 99.328h88.901818a106.123636 106.123636 0 0 1 207.592727 25.879272l0.139636 4.840728a106.077091 106.077091 0 0 1-207.732363 30.347636h-88.901818a221.882182 221.882182 0 0 1-212.526546-158.021818h1.070546a107.054545 107.054545 0 0 1-107.054546-107.054546V463.592727a107.054545 107.054545 0 0 1 101.469091-106.961454A412.532364 412.532364 0 0 1 512 7.261091z m0 856.622545a44.962909 44.962909 0 0 0-44.869818 41.751273l-0.093091 3.584a44.962909 44.962909 0 0 0 89.832727 3.211636l0.093091-3.584A44.962909 44.962909 0 0 0 512 863.883636z m412.346182-445.067636v1.489455h-61.067637v-1.489455a45.986909 45.986909 0 0 0-35.653818 44.823273v210.850909c0 25.367273 20.619636 45.940364 45.986909 45.940363h40.401455a45.986909 45.986909 0 0 0 45.986909-45.986909V463.592727a45.986909 45.986909 0 0 0-35.653818-44.776727zM64 463.592727v210.850909c0 21.829818 15.266909 40.122182 35.700364 44.823273l-0.046546-1.536h61.067637l0.046545 1.489455a45.986909 45.986909 0 0 0 35.607273-44.823273V463.592727a45.986909 45.986909 0 0 0-35.653818-44.776727v1.489455H99.653818v-1.489455a45.986909 45.986909 0 0 0-35.653818 44.823273z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
+{/* icon-dianhua */}
 
       { name === 'icon-dianhua' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M938.461867 771.925333a59.255467 59.255467 0 0 1 0 83.694934l-41.847467 41.847466c-30.9248 30.9248-71.611733 49.7664-120.9344 55.978667a293.410133 293.410133 0 0 1-36.864 2.286933c-35.84 0-74.581333-6.075733-115.541333-18.090666-111.274667-32.699733-228.2496-106.461867-329.352534-207.5648-101.102933-101.137067-174.865067-218.112-207.530666-329.352534-16.2816-55.3984-21.640533-106.7008-15.872-152.405333 6.2464-49.288533 25.088-89.975467 55.978666-120.900267l41.8816-41.847466a59.255467 59.255467 0 0 1 83.694934 0l184.149333 184.149333a59.255467 59.255467 0 0 1 0 83.694933l-41.847467 41.847467c-23.688533 23.6544-0.1024 100.352 66.9696 167.389867 67.072 67.072 143.701333 90.658133 167.389867 66.9696l41.8816-41.847467a59.255467 59.255467 0 0 1 83.694933 0l184.149334 184.149333z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
 {/* icon-peibu */}

src/pages/colorRelated/takeColor/components/Texture/index.tsx

@@ -5,6 +5,7 @@ import { FC, memo, useMemo, useRef, useState } from 'react'
 import Upload from '../Upload'
 import { screenshot } from '@/common/util'
 import { formatImgUrl, formatUrl } from '@/common/format'
+import IconFont from '@/components/iconfont/iconfont'
 
 interface TextureEvent {
   onUploadConfirm?: (file: string) => void
@@ -42,8 +43,7 @@ const Texture: FC<PropsType> = params => {
         <View onClick={handleOpenModal} className={styles['tc-i-upload']}>
           {detail.texture_url && <Image src={formatUrl(detail.texture_url)} />}
           <View v-else className={styles['tc-i-u-box']}>
-            {/* TODO: 更换iconfont */}
+            <IconFont name='icon-shangchuanwenli' size={66} color='#707070'></IconFont>
-            <Text className='iconfont icon-shangchuanzhaopian'></Text>
             <View>上传纹理</View>
           </View>
         </View>