Icon SVG Inline Loader
A webpack loader that enables inlining Material Design SVGs, Ionicon SVGs, Iconic SVGs, or any SVG file into HTML.
Install
npm install --save-dev svg-icon-inline-loader
Usage
Webpack Configuration
test: /\.html$/ loader: 'svg-icon-inline'
Or with html-loader:
test: /\.html$/ loader: 'html!svg-icon-inline'
Within HTML
This loader recognizes 3 types of self-closing tags:
<mat-svg/>
- Inline a Material Design SVG<ion-svg/>
- Inline an Ionicon SVG<iconic-svg/>
- Inline an Iconic SVG<file-svg/>
- Inline an SVG file.
Inline a Material Design SVG
category
: The category that Material Design specifies for that icon.name
: The name of the icon. If the name is multi-word, it must be separated using underscores.
Inline an Ionicon SVG
name
: The name of the icon. If the name is multi-word, it must be separated using hyphens.
Inline an Iconic SVG
name
: The name of the icon. If the name is multi-word, it must be separated using hyphens.
Inline an SVG File
src
: The path of the svg file.
Features
Retained Attributes
Any attributes apart from category
, name
, or src
, are retained. For example:
Input
Output
Accessibility Improvements
A11y modifications for SVGs as recommended.
- Add
role="presentation"
andfocusable="false"
attributes. - Remove
desc
andtitle
attributes.
SVG Optimization
SVGO is used to optimize SVGs.
Applying CSS to SVGs
Inlining SVGs enables CSS to be applied to SVGs.
Notes
Originally forked from markup-inline-loader. Thank you!