1

Экспортирую SVG из файла index.ts

import * as upArrow from "./up-arrow.svg";
import * as downArrow from "./down-arrow.svg";

export { upArrow, downArrow };

Затем использую в компоненте

import * as React from "react";
import { Icon } from "components";
import { upArrow, downArrow } from "common/assets";

const CollapseIcon = ({ condition }) => (
  <Icon alternative={upArrow} asset={downArrow} condition={condition} />
);

export default CollapseIcon;

Если это важно, я использую значения asset и alternative в src атрибуте

export default styled.img.attrs<IconProps>({
  src: ({ condition, alternative, asset }: IconProps) =>
    condition ? alternative : asset,
  alt: ({ alt }: IconProps) => alt
})`
  vertical-align: middle;
 `

В итоге получаю HTML-элемент с некорректным значением аттрибута src, если убираю лишние кавычки, элемент отображается корректно. Где допускаю ошибку?

кусок разметки в отладчике

1 ответ 1

1

Добавить .svg расширение в лист расширений url-loader

...
rules: [
...
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
            loader: require.resolve("url-loader"),
            options: {
              limit: 10000,
              name: "static/media/[name].[hash:8].[ext]"
            }
          },
...

3
  • прошло 2 дня, вы можете, если захотите отметить свой ответ зеленой галочкой. Баллов это вам не добавит, но зато вопрос будет отмечен, как решенный 19 окт 2018 в 19:14
  • @while1pass А можно подробнее? Где находится это лист расширений и как он обычно выглядит?
    – Arantler
    18 фев 2019 в 9:29
  • @Arantler это конфигурация webpack, подробнее здесь webpack.js.org/loaders/url-loader
    – while1pass
    19 фев 2019 в 14:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.