Использование svg-url-loader с приложением Create React

Question

Я использую Create React App, и я хотел бы включить свой SVG-файл в качестве URI данных.

Я знаю, что CRA позволяет мне импортировать и визуализировать SVG как компонент, например:

import { ReactComponent as Logo } from './logo.svg';
// <Logo />

И я знаю, что могу получить URL SVG:

import Logo from './logo.svg';
// <img src={Logo} />

Но я хотел бы встроить содержимое SVG в качестве URI данных, как в:

<img src="data:image/svg+xml;utf8,<svg>...</svg>">

Я знаю, svg-url-loader может сделать это. Поэтому я настроил его (используя Rescripts , потому что CRA ограничивает изменение конфигурации Webpack):

function addSvgLoader(config) {
  config.module.rules.push({
    test: /\.svg/,
    use: {
      loader: "svg-url-loader",
      options: {
        limit: 15000,
      },
    },
  });

  return config;
}

module.exports = [addSvgLoader];

С этим, теоретически, я смогу использовать мой второй пример выше и вместо получения URL-адреса с отпечатками пальцев получите встроенный URI данных. Тем не менее, отпечатанный URL-адрес по-прежнему отображается, и содержимое файла SVG теперь выглядит следующим образом:

module.exports = "data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24V0h24v24H0zM ... [truncated] ... 03h-.52l-.23.02z'/%3E%3C/svg%3E"

Я подозреваю, что это конфликт между загрузчиком CRA svg-url-loader, но я не смог найти решение. Если есть альтернатива svg-url-loader, я бы тоже это учел.

Answer 1

Правила веб-пакетов используют глобус test для правила для обработки включающих файлов при использовании синтаксиса import. Поскольку правила не должны быть взаимоисключающими, несколько правил могут легко обрабатываться по одним и тем же критериям test.

В вашем примере это звучит как ранее существующее правило CRA для svgs и ваше svg-url-loader правило обрабатывает импортированный SVG; порядок диктуется тем, как ваш конфиг Webpack выделяет во время выполнения.

Попробуйте что-то вроде:

1. Создайте вариант SVG с идентифицируемым прозвищем в имени файла (например, my-image.data-uri.svg)

2. Сконфигурируйте плагин svg-url-loader для активации для шаблона *.data-uri.svg glob

   {
     test: /\.data-uri.svg/,
     use: {
       loader: 'svg-url-loader',
       options: {
           encoding: 'base64'
       },
     },
   },
   

Имя файла здесь действительно похоже на intent и правило будет направлять эти случаи через пользовательский плагин во время сборки.

Примечание

При попытке сделать это вне современного CRA, более старые стратегии компиляции stati c рекомендовали указать намерение импорта в утверждение require:

require('svg-url-loader?encoding=base64!./file.svg');

Это обычно отбрасывается в пользу stati c mapping, следовательно, необходимо использовать глобальный тест для активации вашего специального случая плагина.