웹 팩을 사용하여 인라인 svg를 설정하는 방법

웹 팩을 사용하여 인라인 svg를 설정하는 방법

webpack을 사용하여 인라인 svg를 설정하는 방법을 알고 싶습니다.

리액트 웹팩 쿡북을 팔로우하고 있습니다.

파일 로더에서 webpack.config가 올바르게 설정되어 있다.

단, 이 예에서는 다음과 같은 배경 이미지를 사용하고 있습니다.

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

정상적으로 동작합니다만, 인라인 svg 이미지를 가지고 싶습니다.로고를 포함하려면 어떻게 해야 하나요?svg inline이 내 리액트 컴포넌트에 있습니까?

import React, { Component } from 'react'

class Header extends Component {

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

export default Header

사실 Michelle의 답변은 나에게 올바른 방향을 알려주었고, 그것은 웹 팩과 함께 svg 파일을 로드하고 그것을 당신의 것으로 사용하기에 좋습니다.<img>src

그러나 실제로 인라인 svg를 얻으려면 다음 작업을 수행해야 합니다.

파일 로더 대신 svg-inline-loader를 svg 로더로 사용합니다.

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

다음으로 컴포넌트에 svg inline을 로드하려면 다음 절차를 수행합니다.

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}} />

여기 간단한 비반응 솔루션이 있습니다.

1. Svg 인라인 로더 설치
2. webpack.config.js에서 추가{ test: /\.svg$/, loader: 'svg-inline-loader' }
3. js 파일에서 svg 이미지를 Import하여 다음과 같이 DOM 요소에 추가합니다.

  import Svg from './svg.svg';

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

    element.innerHTML = Svg;

    return element;
  }

  document.body.appendChild(component());

저는 위의 어떤 옵션도 좋아하지 않기 때문에 저의 늦은 답변이 여전히 누군가에게 도움이 되기를 바랍니다.

react-svg-loader 웹 팩로더에서는 JSX 컴포넌트와 같은 SVG 아이콘을 Import할 수 있습니다.

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
      }
    }
  ]
}

가장 좋은 점은 svg 파일 내용만 출력하고 별도의 래퍼와dangerouslySetInnerHTML당신의 코드로.

오래된 질문입니다만, 이 솔루션을 어디서도 찾을 수 없었기 때문에 누군가에게 도움이 되기를 바라며 글을 올렸습니다.

이러한 SVG 아이콘을 스타일링하려면 원시 로더와 함께 로드해야 합니다.

webpack.config.disc:

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

내 관점에서의 Import:

import closeIcon from 'svg/ic_close_black_24px.svg'; 

템플릿(Mustache는 부호화되지 않은 SVG 데이터(URL)를 삽입하기 위해 3개의 괄호를 사용합니다).

<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과 함께 Backbone with 콧수염 템플릿 엔진을 사용하고 있습니다.

확실히 파일 로더를 사용하고 있기 때문에, 다른 요구와 거의 같은 방법으로 사용할 수 있습니다.웹 팩이 회전합니다.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

React를 사용하는 다른 답변과 마찬가지로 편리한 Vue 플러그인도 있습니다.

vue-syslogg-syslog는 설정에 삽입하고 사용을 시작합니다.좋은 점은 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>

각도 솔루션(2019):svg-sprite-loader를 사용하여 SVG를 웹 팩 번들과 함께 느리게 로드되는 단일 스프라이트로 결합합니다.

웹 팩

{
  test: /\.svg$/,
  use: [
    'svg-sprite-loader',
    'svgo-loader' // Optimize SVGs (optional)
  ]
}

HTML

<svg>
    <use xlink:href="#arrow"/>
</svg>

각도 구성 요소

export * from 'assets/images/icons/arrow.svg';

AOT 컴파일러가 트리 셰이크 중에 Import를 삭제하지 않도록 하기 위해 내보내기(가져오기 대신)를 사용하지만 컴포넌트에 최소한의 코드를 사용할 수 있습니다.

이 방법으로 내보내기를 사용하려면 패키지의 SVG 파일에서 부작용을 예상하도록 컴파일러를 구성해야 합니다.json(즉, "side Effects": false를 사용할 수 없습니다).「Webpack Tree Shreaking Guide」를 참조해 주세요.

"sideEffects": [
    "*.svg",
],

@svgr/webpm(npm)은 create-svg-app이 사용하는 인라인 svg 로더입니다.

웹 팩 구성에 규칙을 추가합니다.

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

다음으로 svgs를 React 컴포넌트로 Import할 수 있습니다.

import Star from './star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)

하시는 분svg-inline-loader 수 없습니다」는, 「을 찾을 수 없습니다」를 인스톨 해 .babel-plugin-inline-react-svg합니다: babel 플 러 인 인 인 and and 니 and and and and and and and and and 。

"plugins": [
    ...
    ["inline-react-svg", {}]
],
...

언급URL : https://stackoverflow.com/questions/34257800/how-to-set-up-an-inline-svg-with-webpack