+
+ External SVG sprite
+
+ Use SVG sprite by referencing the external SVG which you can find in svg/prc-app-ui-sprite.svg.
+ Please use SVG for Everybody polyfill in order to support this technique on Internet Explorer 11 and below.
+
+
+
+
+ Add CSS
+ Make sure to include the sprite shape dimensions via CSS.
You may use the your own classes for different icon dimensions or colors.
+ .svg-icon {
+ width: 32px;
+ height: 32px;
+
+ display: inline-block;
+ fill: currentColor;
+}
+
+
+
+ Use your icons
+ Include any icon by using the following code referencing the icon name
+ <svg class="svg-icon">
+ <use xlink:href="svg/prc-app-ui-sprite.svg#icon-name"></use>
+</svg>
+
+
+
+ Inline SVG sprite
+ Use SVG sprite by inlining the SVG code on your website.
Your browser has to support inline SVG for this technique to work.
+
+ Include the SVG code
+ This is an inlined version of the generated SVG sprite with <symbol> definitions, which should be included at the top of your page. Icons may be <use>d anywhere
+ below the code on the same page. Please note the width, height and style attribute of generated SVG code.
+
+
+
+
+ Add CSS
+ Make sure to include the sprite shape dimensions via CSS.
You may use the your own classes for different icon dimensions or colors.
+ .svg-icon {
+ width: 32px;
+ height: 32px;
+
+ display: inline-block;
+ fill: currentColor;
+}
+
+
+
+ Use your icons
+ Include any icon by using the following code referencing the icon name
+ <svg class="svg-icon">
+ <use xlink:href="#icon-name"></use>
+</svg>
+
+