javascript - Attaching an SVG to the DOM with Webpack - Stack Overflow

admin管理员组

文章数量:1355646

Currently my pany includes a rather large SVG sprite containing various icons in the index.html of our AngularJS web app. The main SVG is hidden by CSS and we display individual icons from the SVG by selecting them by their IDs:

<svg>
  <use xlink:href="#icon-id"></use>
</svg>

We are now trying to reduce the load time of our site by splitting up the SVG and inlining the resulting parts on pages tha need them. Since we are also moving to Webpack to bundle our app, we'd like to specify dependencies for a specific SVG file in an Angular module and then have Webpack insert the content of the SVG -- possibly wrapped in a div -- into the DOM. Is there any way of achieving this with an existing loader? I found the raw-loader which basically exports the content of our SVG. However, I don't know how to chain it with another loader that would insert into the DOM like say the style-loader does.

Any help is greatly appreciated.

Felix

Currently my pany includes a rather large SVG sprite containing various icons in the index.html of our AngularJS web app. The main SVG is hidden by CSS and we display individual icons from the SVG by selecting them by their IDs:

<svg>
  <use xlink:href="#icon-id"></use>
</svg>

We are now trying to reduce the load time of our site by splitting up the SVG and inlining the resulting parts on pages tha need them. Since we are also moving to Webpack to bundle our app, we'd like to specify dependencies for a specific SVG file in an Angular module and then have Webpack insert the content of the SVG -- possibly wrapped in a div -- into the DOM. Is there any way of achieving this with an existing loader? I found the raw-loader which basically exports the content of our SVG. However, I don't know how to chain it with another loader that would insert into the DOM like say the style-loader does.

Any help is greatly appreciated.

Felix

• javascript
• angularjs
• svg
• webpack

Share Improve this question Follow asked Jul 30, 2015 at 14:59 FelixFelix 22422 silver badges1010 bronze badges 1

• same exact issue here, did you happen to find a solution? – lanan Commented Aug 17, 2015 at 20:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Another option has e out since this question was asked: https://github./kisenka/svg-sprite-loader

It's like style-loader but for SVG:

• Creates a single SVG sprite from a set of images.
• Raster images support (PNG, JPG and GIF).
• Custom sprite implementation support.

React examples are provided, and there is a config option for angular:

• angularBaseWorkaround Adds workaround for issue with bination of and History API which is typical for Angular.js.

// some-ponent.jsx
import Icon from './icon';
import help from './images/icons/Help.svg';

<Icon glyph={help} />

I ended up writing my own webpack loader for this problem. You can install the inline-loader through npm. More info can be found at https://www.npmjs./package/inline-loader

Also you can use: https://github./mrsum/webpack-svgstore-plugin for that

npm i webpack-svgstore-plugin --save-dev

本文标签： javascriptAttaching an SVG to the DOM with WebpackStack Overflow