当前位置:
首页
文章
前端
详情

在React中定义使用SVG图标

Icons.jsx

export function IconTrend(props: any) {
    return (<svg viewBox="0 0 17 16" height="1em" width="1em" {...props}>
                <g fill="none">
                    <path d="M2.55072464 8.28985507L0 8.28985507 0 0 12.7536232 0 12.7536232 8.28985507 10.2028986 8.28985507z"/>
                    <path d="M3.82608696 4.7826087L3.82608696 6.05797101"/>
                    <path d="M6.37681159 8.28985507L6.37681159 10.2028986"/>
                    <path d="M6.37681159 3.50724638L6.37681159 6.05797101"/>
                    <path d="M8.92753623 2.23188406L8.92753623 6.05797101"/>
                    <path d="M2.55072464 10.8405797L10.2028986 10.8405797"/>
                </g>
            </svg>)
}
export function IconSet(props: any) {
    return (<svg viewBox="0 0 1024 1024" width="1em" height="1em" {...props}><path d="M646.376988 934.978501l-0.005117 0c-16.305361-0.005117-32.157397-6.747681-42.395576-18.043958-13.947663-15.292288-58.142212-55.05899-94.319156-55.05899-35.927257 0-80.808444 39.997969-93.696985 54.004985-10.213619 11.105942-25.953092 17.735943-42.103934 17.735943-7.695263 0-14.951527-1.475608-21.579481-4.387937l-1.161453-0.509606-109.959368-61.492516-1.092891-0.76134c-20.018939-14.012132-27.637454-41.422412-17.7165-63.755046 0.076748-0.171915 10.143011-23.399943 10.143011-44.578288 0-64.269769-52.29197-116.561739-116.560716-116.561739l-3.89982 0c-0.237407 0.005117-0.474814 0.011256-0.706081 0.011256-18.412348 0-33.402761-16.355503-38.193881-41.665958-0.381693-2.028193-9.381671-50.03558-9.381671-87.86107 0-37.827537 8.999978-85.839017 9.381671-87.866187 4.847401-25.631774 20.165272-42.097794 38.899962-41.655725l3.89982 0c64.268746 0 116.560716-52.29197 116.560716-116.560716 0-21.173229-10.061147-44.396139-10.16757-44.62843-9.906627-22.312168-2.237971-49.717332 17.866926-63.684438l1.13894-0.789992L357.374852 93.123934l1.208525-0.512676c6.537903-2.788509 13.69286-4.198625 21.273513-4.198625 16.117073 0 31.885198 6.484691 42.193984 17.34811 13.736862 14.380522 57.150628 51.783387 92.290963 51.783387 34.80776 0 77.959559-36.660968 91.650373-50.79078 10.248412-10.641361 25.908066-17.015535 41.86141-17.015535 7.735172 0 15.026228 1.461281 21.666462 4.349051l1.173732 0.514723 112.086821 62.268182 1.103124 0.776689c20.054755 13.991666 27.693736 41.402969 17.766642 63.748906-0.075725 0.170892-10.143011 23.400966-10.143011 44.578288 0 64.268746 52.292993 116.560716 116.560716 116.560716l3.900843 0c18.708084-0.417509 34.046421 16.017812 38.898939 41.655725 0.38374 2.02717 9.382695 50.034557 9.382695 87.86107 0 37.826514-8.998955 85.837994-9.387811 87.866187-4.846378 25.631774-20.185738 42.038442-38.898939 41.654702l-3.895727 0c-64.268746 0-116.560716 52.292993-116.560716 116.561739 0 21.172205 10.06217 44.391023 10.163477 44.62229 9.901511 22.296819 2.252297 49.707099-17.816784 63.689554l-1.124614 0.786922-113.975844 62.99473-1.189082 0.511653C661.045059 933.552012 653.915685 934.978501 646.376988 934.978501L646.376988 934.978501zM642.915144 881.279485c0.509606 0.332575 1.950422 0.89744 3.461845 0.89744 0.061398 0 0.121773 0 0.171915-0.005117l106.488313-58.853409c-2.569522-5.970992-14.325263-34.95614-14.325263-65.180512 0-90.406033 71.207785-164.497495 160.478971-169.130002 1.285273-7.095605 8.258081-47.007617 8.258081-76.952626 0-29.938869-6.972808-69.837578-8.258081-76.952626-89.271186-4.635577-160.478971-78.724992-160.478971-169.130002 0-30.273491 11.790534-59.291384 14.340613-65.217351l-104.760972-58.202587c-0.119727-0.005117-0.267083-0.014326-0.437975-0.014326-1.783623 0-3.451612 0.649799-4.006244 1.023306-1.75804 1.808182-16.944927 17.20587-38.757722 32.550347-32.28838 22.714328-62.818721 34.233686-90.747817 34.233686-28.202319 0-58.977229-11.745509-91.475388-34.908044-21.945825-15.640212-37.201274-31.336706-38.963407-33.175587-0.557702-0.3776-2.24718-1.048889-4.047176-1.048889-0.140193 0-0.267083 0.00614-0.372483 0.011256L270.975063 200.821795c2.601244 6.046716 14.310937 34.978652 14.310937 65.150836 0 90.405009-71.207785 164.494425-160.478971 169.130002-1.284249 7.099698-8.258081 47.00864-8.258081 76.952626 0 29.940916 6.972808 69.832462 8.263198 76.94751 89.26607 4.637624 160.473855 78.724992 160.473855 169.130002 0 30.333866-11.836583 59.401902-14.354939 65.252143l102.697987 57.423851c0.066515 0.007163 0.143263 0.007163 0.228197 0.007163 1.50119 0 2.922563-0.548492 3.430122-0.87595 1.921769-2.060939 17.259082-18.295692 39.35431-34.490535 32.93204-24.137747 64.228837-36.374442 93.016487-36.374442 29.061896 0 60.594053 12.471033 93.719498 37.068244C625.598756 862.646102 641.000538 879.183753 642.915144 881.279485L642.915144 881.279485zM510.032694 666.695245c-85.591377 0-155.225317-69.635987-155.225317-155.230434 0-85.5924 69.63394-155.226341 155.225317-155.226341 85.59547 0 155.23555 69.634963 155.23555 155.226341C665.268244 597.059258 595.627141 666.695245 510.032694 666.695245L510.032694 666.695245zM510.032694 409.038c-56.479339 0-102.425787 45.946448-102.425787 102.426811 0 56.480362 45.946448 102.434997 102.425787 102.434997 56.480362 0 102.434997-45.953611 102.434997-102.434997C612.467691 454.984449 566.518173 409.038 510.032694 409.038L510.032694 409.038zM510.032694 409.038" p-id="5216"></path></svg>)
}

页面引入使用

import {
  IconTrend,
  IconSet
} from './Icons'

export default App() {
  return (<div>
      <IconTrend style={{stroke: '#fff', fontSize: 18}} />
      <IconSet style={{fill: '#fff', fontSize: 18}} />
    </div>)
}

免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。