javascript - 是否可以在 reactjs 中使用自定义图标？

Question

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

Answer 1

我不确定你的 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