web-dev-qa-db-ja.com

svg-url-loaderを使用してwebpackにsvgをロードする

WebpackワークフローでSVGを操作するのに多くの問題があります。 CSSのbackground: url(sample.svg)プロパティで表示しようとしています。これだけではうまくいかなかったので、ローダーを使っていたと思いました。これが私が使用したステップです。

svg-url-loader を使用してSVGをロードしました。

1。npm経由でsvg-url-loaderをインストールし、これをmodule.exportsに追加しました。

 {
        test: /\.svg/,
        use: {
            loader: 'svg-url-loader'
        }
      },

2。これをindex.jsファイルの先頭に追加しました：

require('svg-url-loader!./images/topography.svg');

3。CSSへのSVGパスとともにbackground-imageを追加しました。

body {
  background-image: url("../images/topography.svg");
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  background-attachment: fixed;
  letter-spacing: -1px;
}

4。SVGがページにレンダリングされていません。ブラウザで本体を調べると、次のことがわかります。

background: url(data:image/svg+xml,module.exports = __webpack_public_path__ + '8dccca4….svg';);

Data-uriについてあまりよく知らないので、そこで問題が発生している可能性があります。

また、さまざまなSVGファイルを使用してこれを試しましたが、どれも機能しませんでした。

csssvgwebpackloaderdata-uri
7
InspectorDanno

私はまったく同じエラーに遭遇しました。調査の結果、この問題の原因となった別のsvgローダーを追加したことがわかったので、他のsvgローダーを削除して修正しました。

      {
        test: /\.svg/,
        use: {
            loader: 'svg-url-loader'
        }
      },

      {
        test: /\.svg$/,
        use: [
          "babel-loader",
          {
            loader: "react-svg-loader",
            options: {
              svgo: {
                plugins: [{ removeTitle: false }],
                floatPrecision: 2
              },
              jsx: true
            }
          }
        ]
      }

したがって、svgファイルを同時に処理するためにローダーを追加した可能性もあります。確認してください。

3
Jeff Tian

あなたはできる：

a）webpack.config.jsにローダーを設定します。

example.js：

import ExampleIcon from 'assets/icons/example-icon.svg';

...

<ExampleIcon className={styles.exampleIcon} />

webpack.config.js：

{
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: 'react-svg-loader',
      options: {
        svgo: {
          plugins: [{ removeTitle: false }],
          floatPrecision: 2
        },
        jsx: true
      }
    }
  ]
},

b）またはインポート文字列にローダーを設定します。

import ExampleIcon from '!babel-loader!react-svg-loader!assets/icons/example-icon.svg';

...

<ExampleIcon className={styles.exampleIcon} />
0
Ukr