how to set up an inline svg with webpack

Question

I am wondering how to set up an inline svg with webpack?

I am following the react-webpack-cookbook.

I have my webpack.config set up correc

Answer 1

Actually Michelle's answer pointed me in the right direction, and that works nicely for loading an svg file with webpack and using it as your src

However to actually get the inline svg, I needed to do the following:

Instead of file-loader use svg-inline-loader as your svg loader:

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

Then to load the svg inline in a component:

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

class Header extends Component {

  render() {
    return (
        

          
        
    );
  }
};

export default Header

It looks like there is an inline svg wrapper for react svg-inline-react which would be another option instead of the

0 讨论(0)

查看其它9个回答

发布评论:

提交评论

---

•  加载中...