как импортировать значки svg в мое приложение для реагирования

Question

У меня есть файл svg как icons.svg со следующим кодом:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe601;" glyph-name="edit" d="M725.066 850.102c-99.62-99.584-41.618-41.544-41.618-41.544l192.804-192.768c0 0-62.134-62.098 41.544 41.546s-93.222 292.388-192.73 192.768zM640.294 767.342l-455.974-455.972 0.658-0.586-108.142-293.048 299.666 101.376 0.622-0.622 1.572 1.61v0.038l454.4 454.4-192.806 192.806zM358.072 208.75l-157.622-66.56 74.094 150.088 76.69 76.726 83.528-83.566-76.69-76.69z" />
<glyph unicode="&#xe603;" glyph-name="update" d="M727.846 224.038c-59.61-57.528-137.326-87.004-216.026-87.076-70.29 0.072-140.398 23.514-198.694 71.864-74.058 61.658-112.092 149.942-112.2 239.322 0 14.884 1.098 29.658 3.182 44.36l-121.344-22.748c-0.328-7.204-0.584-14.372-0.584-21.614-0.072-122.99 52.918-245.798 155.098-330.57 80.018-66.67 177.774-99.366 274.504-99.366h0.256c112.422 0 224.328 44.434 307.492 129.828l79.688-79.544 0.622 249.49-263.606 0.696 91.61-94.648zM786.688 778.46c-80.092 66.67-177.846 99.328-274.542 99.328-111.616 0-222.794-43.666-305.846-127.89l-75.374 69.596-1.354-241.444 260.974-1.5-92.672 96.986c59.282 56.504 136.376 85.394 214.308 85.466 70.216-0.072 140.434-23.442 198.656-71.864 74.058-61.658 112.092-149.87 112.274-239.396 0-12.874-0.914-25.784-2.45-38.73l120.87 23.186c0.072 5.23 0.328 10.424 0.328 15.544-0.072 123.098-53.028 245.798-155.174 330.714z" />
<glyph unicode="&#xe605;" glyph-name="star" d="M1023.040 556.992c-2.624 8.192-10.304 13.76-18.88 13.76h-361.408l-111.904 343.488c-2.688 8.192-10.272 13.76-18.88 13.76-8.544 0-16.192-5.568-18.88-13.76l-112.48-343.488h-360.768c-8.512 0-16.192-5.568-18.88-13.76-2.624-8.128 0.256-17.184 7.168-22.176l291.968-212.64-112.512-345.44c-2.656-8.192 0.256-17.184 7.232-22.24 6.912-4.992 16.416-4.992 23.328 0l293.792 213.248 293.28-213.248c3.584-2.56 7.52-3.872 11.616-3.872 4.192 0 8.288 1.312 11.712 3.872 7.136 5.056 9.92 14.016 7.2 22.24l-112.48 345.44 292.576 212.64c6.976 4.992 9.856 13.984 7.2 22.176z" />
<glyph unicode="&#xe606;" glyph-name="settings" d="M946.030 400.75v98.742l-14.006 4.536-105.764 34.488-28.232 68.206 54.308 114.762-69.816 69.814-13.166-6.618-99.11-50.396-68.206 28.234-42.788 119.514h-98.742l-4.572-13.97-34.524-105.764-68.096-28.198-114.798 54.272-69.85-69.852 6.618-13.128 50.36-99.182-28.16-68.058-119.516-42.824v-98.78l13.898-4.498 105.802-34.56 28.198-68.134-54.236-114.76 69.85-69.85 13.056 6.656 99.182 50.394 68.132-28.232 42.788-119.514h98.742l4.572 13.97 34.56 105.764 68.058 28.232 114.798-54.272 69.888 69.816-6.692 13.092-50.394 99.144 28.232 68.134 119.626 42.826zM512 309.722c-76.398 0-138.312 61.914-138.312 138.278 0 76.434 61.916 138.312 138.312 138.312 76.326 0 138.312-61.88 138.312-138.312 0-76.36-62.024-138.278-138.312-138.278z" />
<glyph unicode="&#xe607;" glyph-name="pointer-down" d="M62.016 702.72l449.984-479.968 450.080 479.968z" />
<glyph unicode="&#xe608;" glyph-name="next" d="M766.83 453.192l-425.142 437.174-74.57-69.962 356.572-366.554-366.556-376.904 72.96-71.314 411.318 422.912-0.402 0.402z" />
<glyph unicode="&#xe60a;" glyph-name="location" d="M512.288 960c-178.24 0-322.688-144.48-322.688-322.752 0-178.208 322.688-701.248 322.688-701.248s322.752 523.040 322.752 701.248c0 178.272-144.384 322.752-322.752 322.752zM512.288 539.232c-54.112 0-98.048 43.904-98.048 98.016 0 54.144 43.968 98.048 98.048 98.048 54.208 0 98.176-43.904 98.176-98.048 0-54.112-43.968-98.016-98.176-98.016z" />
<glyph unicode="&#xe60b;" glyph-name="list" d="M0 512.288h448.064v447.616h-448.064v-447.616zM576.256 959.904v-191.456h448.352v191.456h-448.352zM0-64h448.064v447.616h-448.064v-447.616zM576.256 512.288h448.352v191.456h-448.352v-191.456zM576.256 192.16h448.352v191.456h-448.352v-191.456zM576.256-64h448.352v191.424h-448.352v-191.424z" />
<glyph unicode="&#xe60c;" glyph-name="info" d="M665.528 238.006c-18.432 0-90.99-112.054-130.486-112.054-10.568 0-15.726 9.288-15.726 18.432 0 21.138 14.482 54.088 22.308 73.874l94.794 256.768c47.544 127.782-13.092 162.048-69.742 162.048-76.434 0-144.896-38.182-197.558-88.248-17.152-17.152-75.046-72.412-75.046-96.182 0-7.864 7.862-17.152 17.152-17.152 23.626 0 86.894 114.616 135.606 114.616 10.57 0 22.382-11.848 13.166-35.51l-92.16-231.936c-9.288-22.308-54.088-130.342-54.088-193.572 0-50.030 32.952-72.376 80.384-72.376 133.046 0 287.086 163.29 287.086 201.51-0.038 11.85-9.178 19.784-15.688 19.784zM639.086 879.322c-57.894 0-108.032-47.36-108.032-105.326 0-54.016 35.584-89.6 89.674-89.6 59.1 0 109.24 44.8 109.24 105.4 0 54.016-38.144 89.528-90.88 89.528z" />
<glyph unicode="&#xe60d;" glyph-name="grid" d="M0 703.104h256.928v256.896h-256.928v-256.896zM383.52 703.104h257.056v256.896h-257.056v-256.896zM767.136 960v-256.896h256.992v256.896h-256.992zM0 319.488h256.928v256.928h-256.928v-256.928zM383.52 319.488h257.056v256.928h-257.056v-256.928zM767.136 319.488h256.992v256.928h-256.992v-256.928zM0-64h256.928v256h-256.928v-256zM383.52-64h257.056v256h-257.056v-256zM767.136-64h256.992v256h-256.992v-256z" />
<glyph unicode="&#xe60e;" glyph-name="success" d="M510.592 900.928c-249.376 0-451.52-202.144-451.52-451.52 0-249.344 202.144-451.52 451.52-451.52 249.344 0 451.52 202.176 451.52 451.52 0 249.376-202.144 451.52-451.52 451.52zM463.872 189.152l-251.872 256.064 64.416 51.872 145.728-114.176c59.52 70.848 192 212.064 374.624 323.968l15.392-35.584c-167.616-154.176-304.96-371.2-348.288-482.144z" />
<glyph unicode="&#xe60f;" glyph-name="collapse" d="M0 482.24h1024v-68.128h-1024v68.128z" />
<glyph unicode="&#xe610;" glyph-name="checkmark" d="M956.526 852.298c-285.11-174.776-491.96-395.264-584.96-505.894l-227.584 178.322-100.534-81.078 393.326-399.946c67.694 173.348 282.112 512.22 543.744 752.97l-23.99 55.626z" />
<glyph unicode="&#xe911;" glyph-name="mark" horiz-adv-x="205" d="M0 960h204.8v-512l-51.2-204.8h-102.4l-51.2 204.8v512zM102.4-64c-56.554 0-102.4 45.846-102.4 102.4s45.846 102.4 102.4 102.4v0c56.554 0 102.4-45.846 102.4-102.4s-45.846-102.4-102.4-102.4v0z" />
<glyph unicode="&#xe912;" glyph-name="send" horiz-adv-x="1205" d="M1198.562 955.723c-3.2 2.651-7.348 4.26-11.872 4.26-2.746 0-5.353-0.593-7.701-1.657l0.117 0.048-1168.685-520.433c-6.060-2.652-10.253-8.527-10.42-15.399v-0.021c0-0.010 0-0.022 0-0.035 0-6.905 4.076-12.857 9.953-15.582l0.106-0.044 230.882-99.991c4.036-1.867 164.683 77.282 481.882 237.508l-293.105-314.729c-4.993-5.353-8.061-12.557-8.072-20.478v-243.051c0 0 0-0.001 0-0.001 0-16.634 13.484-30.118 30.118-30.118 8.512 0 16.199 3.531 21.676 9.208l0.009 0.009 158.419 164.623 241.001-116.856c2.292-1.082 4.979-1.714 7.814-1.714 2.57 0 5.019 0.519 7.247 1.458l-0.123-0.046c4.722 1.962 8.333 5.79 9.962 10.538l0.037 0.123 306.056 934.249c0.506 1.529 0.798 3.289 0.798 5.117 0 5.2-2.362 9.849-6.071 12.931l-0.027 0.022z" />
</font></defs></svg>

, и я пытаюсь использовать его как:

import Icons from '../../assets/icons/s-icons.svg';
const Icon = ({ name, color, size }) => (
  <svg className={`icon icon-${name}`} fill={color} width={size} height={size}>
    <use xlinkHref={`${Icons}#icon-${name}`} />
  </svg>
);
<Icon name="checkmark" color="#FFFFFF" size={35} />

По какой-то причине отображается пустой значок без значка вообще. Любая идея, как мне правильно сделать эту работу, просто чтобы вы знали, что я использую Chrome, не уверен, что проблема в браузере здесь!

В консоли нет ошибок.

Answer 1

Поместите код SVG в файл с расширением .svg. Затем импортируйте файл со следующей инструкцией. Обратите внимание, что SvgIcon, используемое ниже, должно начинаться с заглавной буквы, чтобы соответствовать соглашению об именах компонентов React. Редактирование вашего комментария. Используйте SvgIcon как обычный компонент реакции. ie <SvgIcon style={{}}/>. Вы даже можете создавать встроенные стили.

import {ReactComponent as SvgIcon} from './path';