EsBuild как правильно настроить svg/png?

Question

[Astral100498]

Всем привет. Пытаюсь вставить изображение через url();

import logo from 'assets/icons/common/logo.svg';
const Logo = styled.div`
  width: 120px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image:  url(${logo});
  ${Media.Tablet} {
    width: 150px;
    height: 24px;
  }
`;

На выходе получаю следующее.


Вот сам конфиг

esbuild
  .build({
    outdir: 'public',
    entryNames: "[name]",
    entryPoints: ['src/index.tsx'], 
    bundle: true,
    minify: true,
    metafile: true,
    logLevel: 'info',
    sourcemap: 'inline',
    // platform: "browser",
    target: ['chrome67'],
      define: {
          'process.env.NODE_ENV': '\"development\"',
          'process.env.REACT_APP_FLAGS_CTX_APP_NAME': '\"\"',
          'process.env.REACT_APP_FLAGS_CTX_INSTANCE_ID': '\"\"',
          'process.env.REACT_APP_FLAGS_CTX_HOST': '\"\"',
          'process.env.REACT_APP_FLAGS_CTX_URL' :'\"\"',
          'process.env.REACT_APP_FLAGS_CTX_URI':'\"\"'
         },
      plugins: [ 
        sassPlugin({
          type: 'css-text',
        }), 
        svgrPlugin(),
        definePlugin({
        process: {
          env: {
            __DEV__: true,
          },
        },
      }),
      ],
      loader: {
          ".png": "dataurl",
          ".jpg": "file",
          '.js': 'jsx',
          ".svg": "base64",
          ".ttf": "file",
          ".node": "file",
          ".woff": "file",
          ".woff2": "file",
          ".data": "base64",
      },
  })

Есть предложения как это лечится?

Answer 1

[Alexandroppolus]

У тебя там svgrPlugin(), он преобразует svg в реактовские компоненты. Попробуй убрать его из конфига

Comments

[Astral100498]

Без него начинается красный ад в консоле )

[Alexandroppolus]

Astral100498, ну значит где-то ты используешь СВГ-шки как компоненты. Тут надо определиться, как быть. Либо всегда делать их компонентами и не пытаться вставить в background, либо всегда разуметь их как картинки и не рендерить в jsx, либо какой-то промежуточный вариант, например по названию файла: если там, допустим, "fileName.image.svg", то не превращать в реакт - это можно настроить в конфиге

вообще рекомендуется всегда использовать самый первый вариант. Бонус: в картинке может быть для какого-нибудь цвета значение currentColor, и ты сможешь его задать стилями. Плюс ещё можно что-то докрутить программно.