web-dev-qa-db-ja.com

webpackでインラインsvgを設定する方法

Webpackでインラインsvgを設定する方法を知りたいですか？

react-webpack-cookbook をフォローしています。

webpack.configをfile loaderで正しく設定しています。

ただし、この例では、次のような背景画像を使用しています。

.icon {
   background-image: url(./logo.svg);
}

これは正常に動作しますが、インラインsvgイメージを作成するには、reactコンポーネントにlogo.svgインラインを含めるにはどうすればよいですか？

import React, { Component } from 'react'

class Header extends Component {

  render() {
    return (
        <div className='header'>
            <img src={'./logo.svg'} />
        </div>
    );
  }
};

export default Header
javascriptsvgreactjswebpackloader
33
svnm

実際、ミシェルの答えは私を正しい方向に向けてくれました。それは、webpackでsvgファイルをロードし、それを<img> srcとして使用するのにうまく機能します

ただし、実際にインラインsvgを取得するには、以下を実行する必要がありました。

ファイルローダーの代わりに、svgローダーとして svg-inline-loader を使用します。

{ test: /\.svg$/, loader: 'svg-inline-loader' }

次に、コンポーネントにインラインでsvgをロードするには：

import React, { Component } from 'react'
import logo from "./logo.svg";

class Header extends Component {

  render() {
    return (
        <div className='header'>
          <span dangerouslySetInnerHTML={{__html: logo}} />
        </div>
    );
  }
};

export default Header

React svg-inline-react のインラインsvgラッパーがあるように見えますが、これは<div dangerouslySetInnerHTML={{__html: mySvg}} />の代わりに別のオプションになります

25
svnm

古い質問ですが、この解決策がどこにもなかったため、誰かに役立つことを期待して、投稿することにしました。

これらのSVGアイコンをスタイルできるようにしたい場合は、生のローダーでそれらを読み込むことができます。

webpack.config.js：

 { 
      test: /\.svg$/, 
      loader: 'raw-loader' 
 }

私の見解ではインポート：

import closeIcon from 'svg/ic_close_black_24px.svg';

テンプレート（Mustacheは3つのブラケットを使用して、エンコードされていないSVGデータ（URL）を挿入します）：

<button id="closeModal">
  {{{closeIcon}}}
</button>

この方法では、角括弧の代わりにSVGデータが挿入され、次のようになります。

<button id="closeModal">
  <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
  </svg>
</button>

Webpack 2.5.1でMustacheテンプレートエンジンでBackboneを使用しています

16
jsaddwater

上記のオプションはどれも好きではないので、私の遅い答えがまだ誰かに役立つことを願っています。

react-svg-loader webpack loaderを使用すると、JSXコンポーネントのようなSVGアイコンをインポートできます。

import Logo from './logo.svg';

class App extends Component {
  render() {
    return (
      <div className="App">
          <Logo fill="red" className="logo" width={50} height={50} />
      </div>
    );
  }
}

最小構成は次のようになります。

{
  test: /\.svg$/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "react-svg-loader",
      options: {
        jsx: true // true outputs JSX tags
      }
    }
  ]
}

最良の部分は、コード内に余分なラッパーとdangerouslySetInnerHTMLがなく、svgファイルの内容を出力するだけです。

15
Stas Gavrylov

あなたがファイルローダーを使用しているので、私が間違えていなければ、他の要求とほとんど同じ方法でそれを利用できます。 Webpackはrequire("./logo.svg")をファイルへのパスに変換し、バンドル時に出力します。

import React, { Component } from 'react'

import mySvg from './logo.svg'

class Header extends Component {

  render() {
    return (
        <div className='header'>
            <img src={mySvg} />
        </div>
    );
  }
};

export default Header
11
Michelle Tilley

Reactを使用した別の回答と同様に、便利なVueプラグインもあります。

vue-svg-loader 設定にそれを投げて使用を開始します。素晴らしいことは、それを最適化するためにSVGOを通してsvgも実行することです。

構成

{
    test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    // optional [svgo](https://github.com/svg/svgo) options
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true}
      ]
    }
  }
}

使用法

<template>
  <nav id="menu">
    <a href="...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/some-icon.svg';

export default {
  name: 'menu',
  components: {
    SomeIcon,
  },
};
</script>
4
Brian Henze

これは単純な非反応ソリューションです。

  1. インストール Svgインラインローダー
  2. Webpack.config.jsに{ test: /\.svg$/, loader: 'svg-inline-loader' }を追加します
  3. あなたのjsファイルでsvg画像をインポートし、そのようにDOM要素に追加します
  import Svg from './svg.svg';

  function component() {
    const element = document.createElement('div');

    element.innerHTML = Svg;

    return element;
  }

  document.body.appendChild(component());
1
Dmitry