SVG implementation is fast becoming one of the hottest
topics sweeping design and development circles as of late. With all the
start-ups and JavaScript libraries, I wanted to create a set of SVG
icons that have zero third-party dependencies and that can be
implemented easily.
However, the idea with this article is to provide a set of icons that any web designer or developer can use. Let’s take a look at how everything’s setup.
Let’s take a look at the general document setup:
Lastly, the flat design icons were designed by Studio4 | Creative and are free for any use, credit goes to them for the design. However I slightly modified the original designs as well as converted them to SVG (amongst other things). That’s it really. Feel free to use them to your liking.
Please note, although I’ve designed this for easy implementation, you may need to make some minor adjustments in integrating it into your own set-up. Enjoy!
However, the idea with this article is to provide a set of icons that any web designer or developer can use. Let’s take a look at how everything’s setup.
Setup
As you can see in the demo, there are 6 different sets of icons with various differences in styling and animation. All the styling and animation is done exclusively in CSS, externally from the inline SVG mark-up. If you take a look at the source files, you’ll notice I’ve separated all the styling into individual styles-sheets for the corresponding icon style.Let’s take a look at the general document setup:
- <!DOCTYPE>
- <head>
- <meta charset="utf-8">
- <title>150+ Animated SVG Icons Demo</title>
- <link rel="stylesheet" type="text/css" href="css/social_line_styles.css"><!--SVG Styles & Animation-->
- </head>
- <body>
- <span class="svg-icon flat-line" id="line-lightning"></span><!-- SVG icon is injected via JavaScript into span via the ID -->
- <script src="js/svg_inject_scoial_line.js"></script><!--SVG injection script - contains the inline SVG Data-->
- </body>
- </html>
SVG Injection
Let’s take a look at how the JavaScript injects the SVG into the page. The idea here is that you can use it more dynamically as you won’t need to worry about putting SVG inline SVG’s directly into the page. All you need to do is create an HTML element with the corresponding “id”, and the script will inject the SVG into that element. Additionally, I’ve included all the cleaned and optimised SVG files if you prefer to use other means of implementing.- var SVGstring = "<!--SVG Mark-Up Goes Here-->";
- $(SVGstring).appendTo('#DIV-NAME');
The HTML
The HTML is pretty simple, the icons are injected into “<span>”s with a class for general styling and an ‘id” for specific styling and the injection.- <span class="svg-icon ICON-CLASS-STYLE" id="INDIVIDUAL ID FOR INJECTION AND STYLING"></span>
The CSS
The SVG mark-up contains all the classes and path data. By default, it contains CSS styling mark-up as well. However I’ve placed this in the style-sheets and applied some basic styling and animations. If you want to get more advanced with the animations, feel free to do so.Lastly, the flat design icons were designed by Studio4 | Creative and are free for any use, credit goes to them for the design. However I slightly modified the original designs as well as converted them to SVG (amongst other things). That’s it really. Feel free to use them to your liking.
Please note, although I’ve designed this for easy implementation, you may need to make some minor adjustments in integrating it into your own set-up. Enjoy!
0 comments:
Post a Comment