3 ways to use SVG icons in Webprojects

0 %
100 %
Information about 3 ways to use SVG icons in Webprojects

Published on December 15, 2016

Author: Larz73

Source: slideshare.net

1. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars MessmerSVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer www.comsolit.com 3 ways to use SVG Icons in Webprojects 1 SVG Icons

2. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer ● Scalable Vector Graphics ● XML Structure ● Objects accessible through classes or ID’s ● Changeable like every other HTML Element (with JavaScript) 2 What is SVG?

3. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer The SVG Icon ● Make your own Icons with Adobe Illustrator ● Or use Icons from Good Icons Sources https://material.io/icons/ https://useiconic.com/open 3

4. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer 1. SVG Icons with IMAGE Tag <img src=”images/icon.svg” class=”icon”> ● Insert icon with <img> tag in content ● Style color and size of icons at different position with CSS ● Common use: Logos or grafics ● Single requests for every icon 4

5. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer 2. SVG Icon MAP in HTML content ● We load the whole SVG Map into the <body> ● Insert the icon with <svg> and <use> in content ● No single requests for the different icons ● Style a icons at different position in another color and size 5

6. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer Managing Icons available-icons.json { "general-link": "Link", "page-news": "News" "material-action-info-24": "Info", "material-communication-email-24": "Email" } 6

7. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer The Grunt Task grunt.loadNpmTasks('grunt-svg-sprite'); svg_map: function() { var iconsFolderPath = 'web/Frontend/icons/'; var availableIcons = grunt.file.readJSON(iconsFolderPath + 'available-icons.json'); return { minimal: { src: Object.keys(availableIcons).map(function(icon) { var iconName, path; … More Infos and Use of Library at: https://www.npmjs.com/package/grunt-svg-sprite 7

8. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer Add SVG MAP to HTML Body $.get('/Frontend/icons/svg-map.svg', function(response) { var div = document.createElement('div'); div.style.display = 'none'; div.innerHTML = new XMLSerializer().serializeToString(response.documentElement); $('body').append(div); }); <div style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol viewBox="0 0 24 24" id="extensions-facebook"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"></path></symbol> <symbol viewBox="0 0 24 24" id="extensions-gender_female"><path d="M12 4a6 6 0 0 1 6 6c0 2.97-2.16 5.44-5 5.92V18h2v2h-2v2h-2v-2H9v-2h2v-2.08c-2.84-.48-5-2.95-5-5.92a6 6 0 0 1 6-6m0 2a4 4 0 0 0-4 4 4 ... 8

9. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer Positioning SVG Icon in content <span class="icon"> <svg viewBox="0 0 100 100"> <use xlink:href="#cross"/> </svg> </span> 9

10. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer 3. SVG Icons in external Map File ● Use external SVG-Map ● Insert Icon with <svg><use> in code ● Use Hash for externet SVG-Map File Version (Browser caching issue) ● Use SVG 4 Everybody for Crossbrowser 10

11. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer Insert Icon in HTML <comsolit-icon icon="content-create-24" class="ng-isolate-scope ng-scope"> <svg class="content-create-24"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/Icons/map.symbol.svg?1480415120#content-create-24"></use> </svg> </comsolit-icon> We use our own AngularJS directive 11

12. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer Cross Browser issue External SVG MAP is not Crossbrowser valid Use SVG 4 Everybody ● Crossbrowser down to IE 6 ● Fallback with Image Files https://github.com/jonathantneal/svg4everybody 12

13. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer Icon Styling ● Multicolor ● With CSS 13

14. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.7 36.7"> <title>Cross</title> <path d="M18.3,0A18.35,18.35,0,1,0,36.7,18.3,18.35,18.35,0,0,0,18.3,0Z" transform="translate(0 0)" fill="currentColor"/> <path class="cls-1" d="M29.8,22.5H22.5v7.3H14.3V22.5H7V14.3h7.3V7h8.2v7.3h7.3Z" transform="translate(0 0)"/> </svg> Edit the XML and add the fill attribute 14 The XML

15. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer Styling with CSS header { .icon { svg { fill: white; color: blue; //(Layer defined as currentColor) height: 25px; width: 25px; } } } 15

16. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer 16

17. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer we are hiring! web-developer AngularJS, Symfony, TYPO3, Magento 17

18. www.comsolit.com SVG Icons - 3 ways to use SVG Icons in Webprojects | Lars Messmer thx 18

Add a comment