Можно ли использовать пользовательскую иконку с реагировать? - PullRequest
Новая
       4

Можно ли использовать пользовательскую иконку с реагировать?

0 голосов
/ 08 сентября 2018

Я хочу использовать свои собственные значки в реакции, которые у меня есть в обоих форматах SVG и TTF. Как я могу это сделать? Я хочу поместить эти значки в моей панели навигации как пользовательский значок «Домой» для кнопки «Домой».

1 Ответ

0 голосов
/ 08 сентября 2018

Я не уверен, как ваш веб-пакет настроен для разрешения svg и включения их в вашу сборку, но я могу дать вам два разных подхода:

  • Вы можете создать отдельные файлы SVG, сгенерированные из какого-либо инструмента, в xml

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

...