Question

我想使用我自己设计的自定义图标来反应，而我同时具有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

可以在reactjs中使用自定义图标吗？

1 个答案: