✨ feat(领取色卡完成):
This commit is contained in:
@@ -1,90 +1,132 @@
|
||||
import React, { useState, useEffect, FC } from "react";
|
||||
import { Block, View } from "@tarojs/components";
|
||||
import "./iconfont.scss";
|
||||
import Taro from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import React, { useState, useEffect, FC } from "react";
|
||||
import { Block, View } from "@tarojs/components";
|
||||
import "./iconfont.scss";
|
||||
import Taro from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
|
||||
const SystemWidth = Taro.getSystemInfoSync().windowWidth
|
||||
const quot = '"'
|
||||
|
||||
function hex2rgb(hex) {
|
||||
const rgb: number[] = [];
|
||||
|
||||
hex = hex.substr(1);
|
||||
|
||||
if (hex.length === 3) {
|
||||
hex = hex.replace(/(.)/g, "$1$1");
|
||||
}
|
||||
|
||||
hex.replace(/../g, function(color: string) {
|
||||
rgb.push(parseInt(color, 0x10));
|
||||
return color;
|
||||
});
|
||||
|
||||
return "rgb(" + rgb.join(",") + ")";
|
||||
}
|
||||
|
||||
export type IconNames = 'icon-dingwei' | 'icon-xuanzhongyanse' | 'icon-sekajianyanglingqu' | 'icon-lingseka' | 'icon-lingjianyang' | 'icon-gerenzhongxin-dianji' | 'icon-shouye-dianji' | 'icon-gouwuche-weidianji' | 'icon-gerenzhongxin-weidianji' | 'icon-gouwuche-dianji' | 'icon-shouye-weidianji' | 'icon-paixu1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-tips' | 'icon-dianhua' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
|
||||
|
||||
type PropsType = {
|
||||
name: IconNames;
|
||||
size?: number;
|
||||
color?: string | string[];
|
||||
customStyle?: React.CSSProperties;
|
||||
customClassName?: string;
|
||||
};
|
||||
|
||||
const IconFont:FC<PropsType> = ({
|
||||
name,
|
||||
size = 36,
|
||||
color,
|
||||
customStyle = {},
|
||||
customClassName = ""
|
||||
}) => {
|
||||
const [colors, setColors] = useState<PropsType['color']>()
|
||||
const [isStr, setIsStr] = useState(true)
|
||||
const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth)
|
||||
|
||||
useEffect(() => {
|
||||
setIsStr(typeof color === 'string')
|
||||
if (typeof color === 'string') {
|
||||
setColors(color.indexOf('#') === 0 ? hex2rgb(color) : color)
|
||||
} else {
|
||||
setColors(
|
||||
color?.map(function (item) {
|
||||
return item.indexOf('#') === 0 ? hex2rgb(item) : item
|
||||
})
|
||||
)
|
||||
}
|
||||
return () => {}
|
||||
}, [color])
|
||||
|
||||
useEffect(() => {
|
||||
setSvgSize((size / 750) * SystemWidth)
|
||||
}, [size])
|
||||
|
||||
// 也可以使用 if (name === 'xxx') { return <view> } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题
|
||||
return (
|
||||
<Block>
|
||||
{/* icon-colorCard 本地svg */ }
|
||||
{/* { name === 'icon-colorCard' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px' viewBox='0 0 72 72'><defs><linearGradient id='a' x1='56.049%' x2='45.965%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[0]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[1]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='b' x1='100%' x2='16.645%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[2]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[3]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='c' x1='18.906%' x2='80.404%' y1='44.444%' y2='55.556%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[4]) || '%233591FD'}'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[5]) || '%233667EF'}'/></linearGradient></defs><g fill='none' fill-rule='nonzero'><path fill='url(%23a)' d='M24.75 11.25A2.25 2.25 0 0 1 27 13.5v47.25A2.25 2.25 0 0 1 24.75 63h-13.5A2.25 2.25 0 0 1 9 60.75V13.5a2.25 2.25 0 0 1 2.25-2.25h13.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z'/><path fill='url(%23b)' d='m45.593 16.216 9.546 9.546a2.25 2.25 0 0 1 0 3.182l-31.82 31.82a2.25 2.25 0 0 1-3.182 0L16.273 56.9a3.375 3.375 0 1 0-1.174-1.174l-4.508-4.508a2.25 2.25 0 0 1 0-3.182l31.82-31.82a2.25 2.25 0 0 1 3.182 0Z'/><path fill='url(%23c)' d='M60.75 45A2.25 2.25 0 0 1 63 47.25v13.5A2.25 2.25 0 0 1 60.75 63h-49.5A2.25 2.25 0 0 1 9 60.75v-13.5A2.25 2.25 0 0 1 11.25 45h49.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z' opacity='.95'/></g></svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) } */}
|
||||
{/* icon-alipay */}
|
||||
{/* {name === "icon-alipay" && (
|
||||
<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='M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z' fill='${(isStr
|
||||
? colors
|
||||
: colors[0]) ||
|
||||
"rgb(91,139,212)"}' /%3E%3Cpath d='M979.456 729.6c-13.824-4.608-329.216-101.888-319.488-111.104 46.592-55.808 78.848-185.344 78.848-185.344v-27.648h-185.344V335.872h226.816v-41.472h-226.816V192.512H460.8v97.28H257.024v41.472H460.8v69.632H298.496v27.648h333.824c0 13.824-23.04 106.496-46.08 148.48-4.608-9.216-153.088-60.416-236.544-65.024-88.064 4.608-157.696 32.256-189.952 97.28-46.592 120.32 27.648 241.152 194.56 241.152 27.648 0 162.304-13.824 264.192-153.088 27.648 13.824 185.344 92.672 282.624 143.872-92.672 111.104-231.936 180.736-389.12 180.736-280.576 1.024-508.928-226.304-509.44-506.88v-3.072C1.024 231.424 227.84 3.072 508.928 2.56h3.072c280.576-1.024 508.928 226.304 509.44 506.88v3.072c4.608 82.944-13.824 152.576-41.984 217.088z' fill='${(isStr
|
||||
? colors
|
||||
: colors[1]) ||
|
||||
"rgb(91,139,212)"}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`,
|
||||
...customStyle
|
||||
}}
|
||||
className={classnames(icon, customClassName)}
|
||||
/>
|
||||
)} */}
|
||||
{/* icon-dingwei */}
|
||||
|
||||
const SystemWidth = Taro.getSystemInfoSync().windowWidth
|
||||
const quot = '"'
|
||||
{ name === 'icon-dingwei' && (<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 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}'/%3E%3Cpath d='M512 222c127.04 0 230 102.976 230 230 0 51.2-25.28 110.896-75.328 180.928l-3.536 4.896-3.648 4.976-6.512 8.704-6.816 8.912-7.04 8.96-7.28 9.056-7.52 9.152-7.728 9.216-4.016 4.736-10.176 11.744-2.128 2.432-8.512 9.584-8.736 9.696-9.008 9.792-9.232 9.92-9.488 10.016-9.28 9.648-19.232 21.12a20 20 0 0 1-28.4 1.168l-1.168-1.184-18.88-20.72-9.728-10.144-9.488-10.016-9.248-9.92-8.992-9.808-8.72-9.648-4.32-4.864-8.4-9.536-10.08-11.712-9.808-11.68-7.52-9.168-7.296-9.056-6.992-8.928-3.44-4.448-3.392-4.464-6.48-8.656c-54.768-74.24-82.432-137.12-82.432-190.704 0-127.04 102.976-230 230-230z m0 140a90 90 0 1 0 0 180 90 90 0 0 0 0-180z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-xuanzhongyanse */}
|
||||
|
||||
function hex2rgb(hex) {
|
||||
const rgb: number[] = [];
|
||||
{ name === 'icon-xuanzhongyanse' && (<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 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m0 85.344C276.352 85.344 85.344 276.384 85.344 512c0 235.648 191.04 426.656 426.656 426.656 235.648 0 426.656-191.04 426.656-426.656 0-235.648-191.04-426.656-426.656-426.656z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(255,255,255)'}'/%3E%3Cpath d='M512 512m-426.656 0a426.656 426.656 0 1 0 853.312 0 426.656 426.656 0 1 0-853.312 0Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(51,127,255)'}'/%3E%3Cpath d='M764.8 372.576c16.64 16.64 16.64 43.68 0 60.352l-286.624 286.592c-16.64 16.672-43.68 16.672-60.352 0L275.84 577.504a42.656 42.656 0 1 1 60.352-60.32L448 628.992l256.448-256.416a42.656 42.656 0 0 1 57.28-2.784l3.04 2.784z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-sekajianyanglingqu */}
|
||||
|
||||
hex = hex.substr(1);
|
||||
{ name === 'icon-sekajianyanglingqu' && (<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='M352 112c17.664 0 32 14.336 32 32v736a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32V144c0-17.664 14.336-32 32-32H352z m-104.009143 616.009143a56.009143 56.009143 0 1 0 0 112 56.009143 56.009143 0 0 0 0-112.018286z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(229,232,240)'}'/%3E%3Cpath d='M717.586286 170.642286l135.771428 135.771428a32 32 0 0 1 0 45.257143l-520.429714 520.411429a32 32 0 0 1-45.257143 0l-32.566857-32.530286a56.009143 56.009143 0 1 0-62.665143-62.646857l-40.539428-40.576a32 32 0 0 1 0-45.257143l520.429714-520.411429a32 32 0 0 1 45.257143 0z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(212,217,231)'}'/%3E%3Cpath d='M880 656c17.664 0 32 14.336 32 32v192a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32v-192c0-17.664 14.336-32 32-32h736z m-632.009143 72.009143a56.009143 56.009143 0 1 0 0 112 56.009143 56.009143 0 0 0 0-112.018286z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(169,179,207)'}' opacity='.95'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-lingseka */}
|
||||
|
||||
if (hex.length === 3) {
|
||||
hex = hex.replace(/(.)/g, "$1$1");
|
||||
}
|
||||
{ name === 'icon-lingseka' && (<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='M384 112a32 32 0 0 1 32 32v276.330667l50.666667-50.645334 15.274666-15.274666 67.584-67.584 18.517334-18.517334 102.357333-102.357333a32 32 0 0 1 45.226667 0l158.421333 158.4a32 32 0 0 1 0 45.248l-36.906667 36.906667-24.021333 24.021333-184.192 184.192-9.28 9.28H864a32 32 0 0 1 32 32v224a32 32 0 0 1-32 32H400c-2.773333 0-5.44-0.341333-8-1.002667-2.56 0.64-5.226667 1.002667-8 1.002667H160a32 32 0 0 1-32-32V144a32 32 0 0 1 32-32H384z m-16 48h-192v704h192v-704z m480 512H571.669333l-43.072 43.050667-16.64 16.64-16.170666 16.170666-73.450667 73.450667-6.314667 6.314667L416 864h432v-192zM693.013333 211.2L416 488.234667v271.530666l412.8-412.757333L692.992 211.2z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}'/%3E%3Cpath d='M272 680a40 40 0 1 0 0 80 40 40 0 0 0 0-80z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(68,68,68)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-lingjianyang */}
|
||||
|
||||
hex.replace(/../g, function(color: string) {
|
||||
rgb.push(parseInt(color, 0x10));
|
||||
return color;
|
||||
});
|
||||
{ name === 'icon-lingjianyang' && (<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='M770.56 106.176a152 152 0 0 1 18.709333 214.144l-183.253333 213.717333a16 16 0 0 1-24.362667-0.106666L266.88 160.490667l-0.810667 1.109333a104.042667 104.042667 0 0 0 2.24 124.949333l2.346667 2.901334 370.922667 442.090666a152 152 0 1 1-21.461334 49.066667l-108.544-129.365333-107.904 128.64a152 152 0 1 1-21.653333-48.874667l98.218667-117.12-246.336-293.568a152 152 0 0 1 18.730666-214.144 24 24 0 0 1 33.813334 2.944l225.130666 268.309333L736.725333 109.12a24 24 0 0 1 33.813334-2.944zM256 712a104 104 0 1 0 0 208 104 104 0 0 0 0-208z m512 0a104 104 0 1 0 0 208 104 104 0 0 0 0-208z m-11.733333-551.509333l-213.333334 254.272 52.202667 62.229333 157.376-187.52 2.346667-2.922667a104.042667 104.042667 0 0 0 2.24-124.949333l-0.810667-1.109333z' 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-gerenzhongxin-dianji */}
|
||||
|
||||
return "rgb(" + rgb.join(",") + ")";
|
||||
}
|
||||
{ name === 'icon-gerenzhongxin-dianji' && (<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 128a144 144 0 0 1 144 144v80a144 144 0 0 1-288 0v-80A144 144 0 0 1 512 128z m112 416C774.217143 544 896 665.782857 896 816V896H128v-80C128 665.782857 249.782857 544 400 544h224z' 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-shouye-dianji */}
|
||||
|
||||
export type IconNames = 'icon-tips' | 'icon-dianhua' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
|
||||
{ name === 'icon-shouye-dianji' && (<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='M570.258286 230.308571l2.541714 2.432L808.740571 468.662857h5.650286v5.668572l73.508572 73.508571c9.325714 9.325714 9.380571 24.411429 0.109714 33.682286a23.789714 23.789714 0 0 1-31.963429 1.462857l-1.700571-1.554286-39.954286-39.972571V864.365714c0 17.481143-14.262857 31.652571-31.817143 31.652572H576V688a64 64 0 0 0-128 0V896H241.444571c-17.590857 0-31.835429-14.171429-31.835428-31.652571V539.648l-39.862857 39.862857a23.808 23.808 0 0 1-33.645715-0.091428 23.826286 23.826286 0 0 1-1.645714-31.981715l1.536-1.682285 73.618286-73.636572v-3.437714h3.456l236.288-236.288c33.170286-33.152 86.582857-33.828571 120.905143-2.084572z' 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-gouwuche-weidianji */}
|
||||
|
||||
type PropsType = {
|
||||
name: IconNames;
|
||||
size?: number;
|
||||
color?: string | string[];
|
||||
customStyle?: React.CSSProperties;
|
||||
customClassName?: string;
|
||||
};
|
||||
{ name === 'icon-gouwuche-weidianji' && (<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='M352 816a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m408.009143 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128zM167.771429 151.990857a55.990857 55.990857 0 0 1 55.296 47.177143l16.987428 106.422857h633.892572c2.139429 0 4.297143 0.128 6.418285 0.365714l3.181715 0.475429a55.990857 55.990857 0 0 1 45.568 64.768L866.742857 729.6a56.009143 56.009143 0 0 1-55.168 46.409143H314.276571a56.009143 56.009143 0 0 1-55.296-47.177143L175.670857 206.738286a7.990857 7.990857 0 0 0-7.899428-6.729143h-87.771429a24.009143 24.009143 0 0 1 0-48.018286h87.771429z m138.605714 569.270857a8.009143 8.009143 0 0 0 7.899428 6.729143h497.28a7.990857 7.990857 0 0 0 7.881143-6.619428l62.390857-358.4a8.009143 8.009143 0 0 0-6.509714-9.252572l-0.676571-0.091428-626.944-0.036572 58.678857 367.670857z' 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-gerenzhongxin-weidianji */}
|
||||
|
||||
const IconFont:FC<PropsType> = ({
|
||||
name,
|
||||
size = 36,
|
||||
color,
|
||||
customStyle = {},
|
||||
customClassName = ""
|
||||
}) => {
|
||||
const [colors, setColors] = useState<PropsType['color']>()
|
||||
const [isStr, setIsStr] = useState(true)
|
||||
const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth)
|
||||
{ name === 'icon-gerenzhongxin-weidianji' && (<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='M624 544C774.217143 544 896 665.782857 896 816V896H128v-80C128 665.782857 249.782857 544 400 544h224z m0 48h-224c-122.038857 0-221.293714 97.590857-223.945143 218.989714l-0.054857 5.010286v32h672v-32c0-122.038857-97.590857-221.293714-218.989714-223.945143l-5.010286-0.054857zM512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-139.757714 143.945143l-4.242286 0.054857a144 144 0 0 1-144-144v-80a144 144 0 0 1 139.757714-143.945143L512 128z m0 48a96 96 0 0 0-95.926857 92.397714l-0.073143 3.602286v80a96 96 0 0 0 191.926857 3.602286l0.073143-3.602286v-80c0-53.028571-42.971429-96-96-96z' 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-gouwuche-dianji */}
|
||||
|
||||
useEffect(() => {
|
||||
setIsStr(typeof color === 'string')
|
||||
if (typeof color === 'string') {
|
||||
setColors(color.indexOf('#') === 0 ? hex2rgb(color) : color)
|
||||
} else {
|
||||
setColors(
|
||||
color?.map(function (item) {
|
||||
return item.indexOf('#') === 0 ? hex2rgb(item) : item
|
||||
})
|
||||
)
|
||||
}
|
||||
return () => {}
|
||||
}, [color])
|
||||
{ name === 'icon-gouwuche-dianji' && (<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='M240 496L215.588571 311.990857l685.531429 25.234286-21.12 158.774857L832 736H288z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}'/%3E%3Cpath d='M288 816m64 0l0 0q64 0 64 64l0 0q0 64-64 64l0 0q-64 0-64-64l0 0q0-64 64-64Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}'/%3E%3Cpath d='M696.009143 816m64 0l0 0q64 0 64 64l0 0q0 64-64 64l0 0q-64 0-64-64l0 0q0-64 64-64Z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(69,129,255)'}'/%3E%3Cpath d='M167.771429 152.009143a55.990857 55.990857 0 0 1 55.296 47.177143l16.987428 106.422857h633.892572c2.139429 0 4.297143 0.109714 6.418285 0.365714l3.181715 0.457143a55.990857 55.990857 0 0 1 45.568 64.768L866.742857 729.6a56.009143 56.009143 0 0 1-55.168 46.409143H314.276571a56.009143 56.009143 0 0 1-55.296-47.177143L175.670857 206.738286a7.990857 7.990857 0 0 0-7.899428-6.729143h-87.771429a24.009143 24.009143 0 0 1 0-48.018286h87.771429z m138.605714 569.234286a8.009143 8.009143 0 0 0 7.899428 6.765714h497.28a7.990857 7.990857 0 0 0 7.881143-6.637714l62.390857-358.4a8.009143 8.009143 0 0 0-6.509714-9.252572l-0.676571-0.091428-626.944-0.036572 58.678857 367.670857z' fill='${(isStr ? colors : colors?.[3]) || 'rgb(69,129,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouye-weidianji */}
|
||||
|
||||
useEffect(() => {
|
||||
setSvgSize((size / 750) * SystemWidth)
|
||||
}, [size])
|
||||
{ name === 'icon-shouye-weidianji' && (<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='M543.817143 690.249143c0-16.676571-12.982857-30.354286-29.44-31.561143l-2.377143-0.091429c-16.786286 0-30.537143 12.909714-31.744 29.293715l-0.091429 2.377143V896H241.444571c-17.590857 0-31.835429-14.171429-31.835428-31.652571V539.648l-39.862857 39.862857a23.808 23.808 0 0 1-33.645715-0.091428 23.826286 23.826286 0 0 1-1.645714-31.981715l1.536-1.682285 73.618286-73.636572v-3.437714h3.456l236.288-236.288c33.170286-33.152 86.582857-33.828571 120.905143-2.084572l2.541714 2.432L808.740571 468.662857h5.650286v5.668572l73.508572 73.508571c9.325714 9.325714 9.380571 24.411429 0.109714 33.682286a23.789714 23.789714 0 0 1-31.963429 1.462857l-1.700571-1.554286-39.954286-39.972571V864.365714c0 17.481143-14.262857 31.652571-31.817143 31.652572H543.817143V690.249143z m-58.806857-425.874286l-1.901715 1.792L257.353143 491.885714v356.608h175.067428v-158.262857c0-43.702857 35.638857-79.140571 79.579429-79.140571 43.940571 0 79.579429 35.437714 79.579429 79.140571v158.244572l175.067428 0.018285V493.714286L539.227429 266.313143a39.698286 39.698286 0 0 0-54.217143-1.938286z' 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-paixu1 */}
|
||||
|
||||
// 也可以使用 if (name === 'xxx') { return <view> } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题
|
||||
return (
|
||||
<Block>
|
||||
{/* icon-colorCard 本地svg */ }
|
||||
{/* { name === 'icon-colorCard' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px' viewBox='0 0 72 72'><defs><linearGradient id='a' x1='56.049%' x2='45.965%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[0]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[1]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='b' x1='100%' x2='16.645%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[2]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[3]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='c' x1='18.906%' x2='80.404%' y1='44.444%' y2='55.556%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[4]) || '%233591FD'}'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[5]) || '%233667EF'}'/></linearGradient></defs><g fill='none' fill-rule='nonzero'><path fill='url(%23a)' d='M24.75 11.25A2.25 2.25 0 0 1 27 13.5v47.25A2.25 2.25 0 0 1 24.75 63h-13.5A2.25 2.25 0 0 1 9 60.75V13.5a2.25 2.25 0 0 1 2.25-2.25h13.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z'/><path fill='url(%23b)' d='m45.593 16.216 9.546 9.546a2.25 2.25 0 0 1 0 3.182l-31.82 31.82a2.25 2.25 0 0 1-3.182 0L16.273 56.9a3.375 3.375 0 1 0-1.174-1.174l-4.508-4.508a2.25 2.25 0 0 1 0-3.182l31.82-31.82a2.25 2.25 0 0 1 3.182 0Z'/><path fill='url(%23c)' d='M60.75 45A2.25 2.25 0 0 1 63 47.25v13.5A2.25 2.25 0 0 1 60.75 63h-49.5A2.25 2.25 0 0 1 9 60.75v-13.5A2.25 2.25 0 0 1 11.25 45h49.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z' opacity='.95'/></g></svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) } */}
|
||||
{/* icon-alipay */}
|
||||
{/* {name === "icon-alipay" && (
|
||||
<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='M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z' fill='${(isStr
|
||||
? colors
|
||||
: colors[0]) ||
|
||||
"rgb(91,139,212)"}' /%3E%3Cpath d='M979.456 729.6c-13.824-4.608-329.216-101.888-319.488-111.104 46.592-55.808 78.848-185.344 78.848-185.344v-27.648h-185.344V335.872h226.816v-41.472h-226.816V192.512H460.8v97.28H257.024v41.472H460.8v69.632H298.496v27.648h333.824c0 13.824-23.04 106.496-46.08 148.48-4.608-9.216-153.088-60.416-236.544-65.024-88.064 4.608-157.696 32.256-189.952 97.28-46.592 120.32 27.648 241.152 194.56 241.152 27.648 0 162.304-13.824 264.192-153.088 27.648 13.824 185.344 92.672 282.624 143.872-92.672 111.104-231.936 180.736-389.12 180.736-280.576 1.024-508.928-226.304-509.44-506.88v-3.072C1.024 231.424 227.84 3.072 508.928 2.56h3.072c280.576-1.024 508.928 226.304 509.44 506.88v3.072c4.608 82.944-13.824 152.576-41.984 217.088z' fill='${(isStr
|
||||
? colors
|
||||
: colors[1]) ||
|
||||
"rgb(91,139,212)"}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`,
|
||||
...customStyle
|
||||
}}
|
||||
className={classnames(icon, customClassName)}
|
||||
/>
|
||||
)} */}
|
||||
{/* icon-tips */}
|
||||
{ name === 'icon-paixu1' && (<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='M384 112.007529c17.679059 0 31.984941 14.305882 31.984941 31.984942V880.037647c0 28.672-34.816 42.857412-54.874353 22.377412l-192-196.276706a32.015059 32.015059 0 0 1 45.778824-44.754824l137.125647 140.16753V143.992471c0-16.865882 13.040941-30.689882 29.605647-31.924706l2.379294-0.060236zM640 911.992471a31.984941 31.984941 0 0 1-32.015059-31.984942V143.962353c0-28.672 34.846118-42.857412 54.904471-22.377412l192 196.276706a31.984941 31.984941 0 1 1-45.778824 44.754824l-137.125647-140.16753v657.528471c0 16.865882-13.040941 30.689882-29.605647 31.924706l-2.379294 0.060235z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(130,130,130)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zhankai */}
|
||||
|
||||
{ name === 'icon-zhankai' && (<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 736l320-416h-640z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.5'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouqi */}
|
||||
|
||||
{ name === 'icon-shouqi' && (<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 288l320 416h-640z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.5'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-tips */}
|
||||
|
||||
{ name === 'icon-tips' && (<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 96c229.76 0 416 186.24 416 416s-186.24 416-416 416S96 741.76 96 512 282.24 96 512 96z m0 576a32 32 0 1 0 0 64 32 32 0 0 0 0-64z m0-384a32 32 0 0 0-32 32v256a32 32 0 0 0 64 0v-256a32 32 0 0 0-32-32z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-dianhua */}
|
||||
@@ -234,9 +276,9 @@ const IconFont:FC<PropsType> = ({
|
||||
{/* icon-daifukuan2 */}
|
||||
|
||||
{ name === 'icon-daifukuan2' && (<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='M848 368a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H176a32 32 0 0 1-32-32V400a32 32 0 0 1 32-32h672zM512 688H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h272a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(64,123,244)'}'/%3E%3Cpath d='M765.664 216.496L812 368H160.688l565.024-172.736a32 32 0 0 1 39.952 21.248z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(142,186,251)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
|
||||
</Block>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconFont
|
||||
|
||||
</Block>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconFont
|
||||
|
||||
Reference in New Issue
Block a user