Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
liqiuying
/
chrome-extension
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Fa: 7de7013192
Branch-ok Tag-ek
chrome-extensio...
/
components
/
IconCom.tsx

IconCom.tsx 6.3 KB
Előzmények Nyers

12345678910111213141516171819202122232425262728293031323334 
  1. import React from 'react'
    2. 

  2. 

  3. // 定义 props 的类型
    4. 

  4. interface IconComProps {
    5. 

  5.     type?: string;
    6. 

  6.     width?: number | string;
    7. 

  7.     height?: number | string;
    8. 

  8.     fill?: string;
    9. 

  9.     _style?: React.CSSProperties;
    10. 

  10. }
    11. 

  11. const IconCom: React.FC<IconComProps> = (props: IconComProps = {}) => {
    12. 

  12.     // 样式content无效, https://www.iconfont.cn/collections/detail?spm=a313x.collections_index.i1.d9df05512.6d153a81fkRhvT&cid=9402
    13. 

  13.     const {
    14. 

  14.         type = "",
    15. 

  15.         width = 20,
    16. 

  16.         height = 20,
    17. 

  17.         fill = "#1677FF",
    18. 

  18.         _style = {},
    19. 

  19.     } = props;
    20. 

  20.     return (
    21. 

  21.         <div style={_style}>
    22. 

  22.             {type == "user" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1937" width={width} height={height}><path d="M498.602667 191.744a204.714667 204.714667 0 0 1 116.906666 372.8c133.162667 47.317333 229.077333 173.290667 231.893334 322.026667l0.085333 6.784h-64c0-157.333333-127.573333-284.885333-284.885333-284.885334-155.136 0-281.301333 123.968-284.821334 278.250667l-0.085333 6.613333h-64c0-151.68 96.810667-280.746667 232-328.810666a204.714667 204.714667 0 0 1 116.906667-372.8z m0 64a140.714667 140.714667 0 1 0 0 281.450667 140.714667 140.714667 0 0 0 0-281.450667z" fill={fill} p-id="1938"></path></svg>}
    23. 

  23.             {type == "code" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2088" width={width} height={height}><path d="M234.666667 149.333333v704H170.666667V149.333333h64z m640 0v704h-42.666667V149.333333h42.666667zM576 789.333333v64h-42.666667v-64h42.666667z m-106.666667 0v64h-64v-64h64z m-128 0v64h-42.666666v-64h42.666666z m426.666667 0v64h-128v-64h128zM576 149.333333v576h-42.666667V149.333333h42.666667z m-106.666667 0v576h-64V149.333333h64z m-128 0v576h-42.666666V149.333333h42.666666z m426.666667 0v576h-128V149.333333h128z" fill={fill} p-id="2089"></path></svg>}
    24. 

  24.             {type == "search" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1419" width={width} height={height}><path d="M782.08 476.330667A305.706667 305.706667 0 1 0 170.666667 476.416a305.706667 305.706667 0 0 0 611.413333-0.085333z m42.666667 0a348.416 348.416 0 1 1-696.832-0.042667 348.416 348.416 0 0 1 696.789333 0.042667z" fill={fill} p-id="1420"></path><path d="M476.373333 281.898667c48.384 0 92.16 19.626667 123.861334 51.328a21.333333 21.333333 0 1 1-30.165334 30.165333 132.096 132.096 0 0 0-93.696-38.826667c-36.608 0-69.76 14.805333-93.738666 38.826667a21.333333 21.333333 0 0 1-30.208-30.165333 174.805333 174.805333 0 0 1 123.946666-51.328zM696.32 696.362667a21.333333 21.333333 0 0 1 30.208 0l163.2 163.2a21.333333 21.333333 0 1 1-30.165333 30.165333l-163.2-163.2a21.333333 21.333333 0 0 1 0-30.165333z" fill={fill} p-id="1421"></path></svg>}
    25. 

  25.             {type == "sure" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8530" width={width} height={height}><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="8531" fill={fill}></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8532" fill={fill}></path></svg>}
    26. 

  26.             {type == "error" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8678" width={width} height={height}><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="8679" fill={fill}></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8680" fill={fill}></path></svg>}
    27. 

  27.             {type == "warn" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8826" width={width} height={height}><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8827"></path><path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8828" fill={fill}></path><path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="8829" fill={fill}></path></svg>}
    28. 

  28.             {type == "info" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8975" width={width} height={height}><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8976" fill={fill}></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5 0.1-39.3-17.1-76-48.3-103.3z" p-id="8977" fill={fill}></path><path d="M512 732m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="8978" fill={fill}></path></svg>}
    29. 

  29.             {type == "list" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17475" width={width} height={height}><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 476H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 760H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" p-id="17476" fill={fill}></path><path d="M160 228m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17477" fill={fill}></path><path d="M160 512m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17478" fill={fill}></path><path d="M160 796m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17479" fill={fill}></path></svg>}
    30. 

  30.         </div>
    31. 

  31.     )
    32. 

  32. }
    33. 

  33. 

  34. export default IconCom
    35.