Создание компонента SVG Sprite с выталкиванием create-react-app

Question

Я использую create-react-applibrary, и я создал компонент SVG, который хорошо работает в разработке. Моя проблема заключается в том, что при создании приложения для публикации процесс сборки не распознает динамические пути моего компонента и поэтому не помещает основной спрайт-файл в мою папку /media.

Пример SVG компонентов:

render() { 
    return (
     <svg className={`icon ${this.props.id}`} fill={this.props.fill}> 
      <use xlinkHref={`/src/assets/images/svg-sprite/svg-sprite-${this.props.category}-symbol.svg#ic_${this.props.id}_24px`}></use> 
     </svg> 
    ); 
} 

Как вы можете видеть, я ссылки на конкретные символы в конкретных спрайтов файлах.

Answer 1

Если вы выбрасываете до 0,5.0, import ing - единственный способ добавить их в сборку. Для этого есть веские причины: например, их имена файлов автоматически включают хеш, потому что система сборки знает о них, поэтому вам не нужно беспокоиться о том, что вы перегружаете кеши браузера при изменении файла. Вам также не нужно беспокоиться о typos, потому что отсутствующий файл даст вам ошибку компиляции.

Начиная с версии 0.5.0, мы также поддерживаем папку public как выходной люк. Вы можете поместить любые файлы в папку public, и они будут объединены с выходом сборки. Единственное, что нужно для их ссылки: вам нужно добавить process.env.PUBLIC_URL к вашим ссылкам. Это гарантирует, что если вы создадите проект для некорневого URL (например, страниц GitHub), он все равно будет работать правильно.

<use linkHref={process.env.PUBLIC_URL + `/assets/images/svg-sprite/svg-sprite-${this.props.category}-symbol.svg#ic_${this.props.id}_24px`}></use> 

будет работать до тех пор, как ваша папка public содержит assets/images/svg-sprite/svg-sprite-* файлы.

Обратите внимание, что эта функция доступна только с react-scripts@0.5.0, поэтому, если вы из нее вышли раньше, вам может потребоваться выполнить ее резервное копирование в ваш проект.

Ссылка:

• Using the public Folder
• Pull Request adding support for it

Answer 2

В случае, если кто-нибудь столкнется с этой проблемой ... Я заглянул в webpack.config.prod.js и нашел комментарий, который говорит, что любые файлы, которые вы import, встроены в папку /media. Исправлена ​​проблема, импортировав все файлы спрайтов SVG, которые не идеальны, но выполнили эту работу.