是否可以使用自定义图标与reactjs？

Posted 2021-04-09

我希望使用我自己设计的自定义图标作为反应，我有两种格式SVG和TTF。我怎样才能做到这一点？我想将这些图标放在导航栏中，就像主页按钮的自定义主页图标一样。

答案

我不确定你是如何配置webpack来解析svg并将它们包含在你的构建中的，但我可以在这里给你两种不同的方法：

• 您可以使用xml中的某个工具生成单独的SVG文件

myIcon.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>bus-start</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Booking-a-trip" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Verify" transform="translate(-113.000000, -312.000000)">
            <g id="Group-3" transform="translate(63.000000, 144.000000)">
                <g id="bus-start" transform="translate(51.000000, 169.000000)">
                    <circle id="Oval" stroke="#606C74" fill="#FFFFFF" cx="12" cy="12" r="12"></circle>
                    <path d="M6,15.0585702 C6,15.6952627 6.2925,16.2668389 6.75,16.6647717 L6.75,17.952627 C6.75,18.3505599 7.0875,18.6761413 7.5,18.6761413 L8.25,18.6761413 C8.6625,18.6761413 9,18.3505599 9,17.952627 L9,17.2291128 L15,17.2291128 L15,17.952627 C15,18.3505599 15.3375,18.6761413 15.75,18.6761413 L16.5,18.6761413 C16.9125,18.6761413 17.25,18.3505599 17.25,17.952627 L17.25,16.6647717 C17.7075,16.2668389 18,15.6952627 18,15.0585702 L18,7.82342808 C18,5.29112834 15.315,4.92937123 12,4.92937123 C8.685,4.92937123 6,5.29112834 6,7.82342808 L6,15.0585702 Z M8.625,15.7820844 C8.0025,15.7820844 7.5,15.2973299 7.5,14.6968131 C7.5,14.0962963 8.0025,13.6115418 8.625,13.6115418 C9.2475,13.6115418 9.75,14.0962963 9.75,14.6968131 C9.75,15.2973299 9.2475,15.7820844 8.625,15.7820844 Z M15.375,15.7820844 C14.7525,15.7820844 14.25,15.2973299 14.25,14.6968131 C14.25,14.0962963 14.7525,13.6115418 15.375,13.6115418 C15.9975,13.6115418 16.5,14.0962963 16.5,14.6968131 C16.5,15.2973299 15.9975,15.7820844 15.375,15.7820844 Z M16.5,11.4409991 L7.5,11.4409991 L7.5,7.82342808 L16.5,7.82342808 L16.5,11.4409991 Z" id="Shape" fill="#606C74" fill-rule="nonzero"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

稍后在您的组件中，您可以将其导入为：

import myIcon from 'assets/myIcon.svg' // depending on your folder structure

在渲染方法中：

render(){
  return (
   <img src={myIcon} /> 
  )
 }

• 第二种方法，你可以使用<svg>让你的svg做出反应： 这是工作代码盒：Svg Icon + React