Takes a directory of .svg files and generates an angular 2 service file with the svg code for inline use.
<object>
svg's can not be styled with CSS easily.
To get dynamic sizing and CSS (color fill) styling, inline <svg>
is the best option.
But for ease of use we want just use files.
So this takes the files and creates an Angular service with the inlined svg code for use.
https://svgontheweb.com/#implementation
https://css-tricks.com/using-svg/
Add to package.json
& npm install
"svg-inline-ng-plugin": "git+ssh://git@github.com/presencelearning/svg-inline-ng-plugin"
And ignore the generated file (write directory) to prevent infinite webpack build loops.
var SvgInlineNgPlugin = require('svg-inline-ng-plugin');
var WatchIgnorePlugin = webpack.WatchIgnorePlugin;
...
new SvgInlineNgPlugin({
svgDir: helpers.root('public', 'images', 'svg'),
writeDir: helpers.root('src', 'build')
}),
new WatchIgnorePlugin([
helpers.root('src', 'build')
])
import { SvgInlineNgPluginService } from '../../../../build/svg-inline-ng-plugin.service';
...
providers: [SvgInlineNgPluginService]
...
constructor(private sanitizer: DomSanitizer,
private svgInlineNgPluginService: SvgInlineNgPluginService ) {}
...
this.svgCode = this.sanitizer.bypassSecurityTrustHtml(this.svgInlineNgPluginService.svgs[this.svg].html);
And then in the html:
<div [innerHtml]="svgCode" class="pl-icon-svg"></div>