React中svg元素无法识别

#1

alert_detail.css

    #alert-icon {
      width: 6.4rem;
      height: 6.4rem;
      background: url('./images/alert_32px.svg') no-repeat center center;
      margin: 0 auto;
      margin-top: 2rem;
    }

alert_32px.svg

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <defs>
            <style>.cls-1{fill-rule:evenodd;fill:red;}</style>
        </defs>
        <title>external_screen_32px_icon</title>
        <path class="cls-1" d="M27.87,24.54L17,5.51a1.23,1.23,0,0,0-2,0l-10.88,19A1,1,0,0,0,5,26H27A1,1,0,0,0,27.87,24.54ZM17,23H15V21h2v2Zm0-4H15V12h2v7Z"/>
    </svg>

webpack.config,js

    {
         test: /\.scss|\.css$/,
         loader: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: "css-loader!sass-loader",
             publicPath: __dirname + '/dist'
       })
     },
```
最后打包出错:

```
    ERROR in ./res/styles/images/alert_32px.svg
    Module parse failed: /local/Workspace/Project/KaiOS/KaiOS_Dint_v3.0/apps/network-alerts2/res/styles/images/alert_32px.svg Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    |     <defs>
    |         <style>.cls-1{fill-rule:evenodd;fill:red;}</style>
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./res/styles/attention.css 6:684-718
```
#2

这里也安装了"react-native-svg": “^5.2.0”,和"react-inlinesvg": “^0.6.0”,发现还是无法解析svg文件,群里有同学知道原因和解决办法么?

#3

JSX 中使用 SVG

  1. webpack 增加 svg-inline-loader
  npm i svg-inline-loader --save-dev

  {
  test: /\.svg$/,
  loader: 'svg-inline-loader'
  }
  1. JSX使用 svg
  const newad = require('../../public/newad.svg')
  <svg style={{fill: "#fff"}} dangerouslySetInnerHTML={{__html: newad }} />
#4

应用安装svg-inline-loader加载器之后,编译不会报错了,怎么使用原来的css加载方式图片显示不出来,确认svg是可用的, 使用css加载有什么区别么?

    #alert-icon {
    background: url('./images/alert_32px.svg') no-repeat center center;
    }

或者说svg文件只是被加载了,现在还缺少一个svg文件解析器

#5

问题已经解决,分享下处理方式:这里需要的是svg-url-loader,而不是svg-inline-loader加载器.

#6

inline是处理行内样式的,对于你这种写在background的应使用url。只看标题了