SVG Icon System

hard-coded.html

<p>Ok, let's put some SVG icons here hard-coded:</p>
<p>Graphical Elements:</p>
 <svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-angle-down"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-folder-open"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bars"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-quote-right"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-mail-reply"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-hashtag"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chain"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-thumb-tack"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-left"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-right"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-play"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pause"></use></svg>
<p> Social:</p>
<svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-behance"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-codepen"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-deviantart"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-digg"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dribbble"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dropbox"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-flickr"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-foursquare"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-google-plus"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-foursquare"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-github"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-instagram"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-linkedin"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-envelope-o"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-medium"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pinterest-p"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-get-pocket"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-reddit-alien"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-skype"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-slideshare"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-snapchat-ghost"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-spotify"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tumblr"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitch"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-vimeo"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-vine"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-vk"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-wordpress"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-yelp"></use></svg><svg class="icon icon-content icon-rotate"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube"></use></svg>

shortcode.html

[inline-svg icon="envelope-o" class="icon-content icon-rotate"]