Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
really
and SVG
How I learnt to stop using icon fonts
Hello!
1000WORDS
A picture is worth
Tree Woods Forest
🍆🙈🦄
7
6 6
4
51
9
1
9
8B
2
Coyuya
El Rosario
Autobuses
del Norte
La Villa -
Basílica
Eduardo
Molina
San Antonio
Abad
Pantitlán
...
ICONSmake for better communication
Menu
ICONSmake for better websites
38!
SPRITELYCSS solutions
.twitter-icon {
background-position: 102px -48px;
}
RESCUE!
Icon fonts to the
HACK
Icon fonts are a
SVG.
What’s next?
<svg>
<path class="heart" d="M25.79,10.7a4.77,4.77,..." />
</svg>
BOTHER?
Why should I
REASONSyou should switch to SVG
5
SEMANTICS.
Perhaps you care about
1
2 ACCESSIBILITYis better out-of-the-box.
<svg>
<title>Heart</title>
<desc>A fluorescent teal heart.</desc>
<path class="heart" d="M25.79,10.7a4.77,4.77,..." />
</s...
LOOKBETTER
Your icons are going to
3
.heart {
fill: #B9FDFE;
}
.heart {
fill: none;
stroke: #B9FDFE;
stroke-width: 2px;
}
.heart {
fill: #B9FDFE;
}
.arrow {
fill: #FD80E5;
}
.arrow {
transition: all 0.5s ease-in;
transform: translate

(20, -20);
}
FAILUREis an awful lot less likely.
4
BROWSERS
Happier
5
4.5per cent of global browser usage
OKAYI’m convinced.
HOWDOIDOIT?
POISON
Choose your
DATAURI
.skull-icon {
background-image: url(‘data:image/svg
+xmldata:application/octet-
stream;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93...
<span class=“skull-icon”> </span>
SYMBOL
<svg style="display: none">
<symbol id="heart-icon">
<...>
</symbol>
<symbol id="skull-icon">
<...>
</symbol>
</svg>
<svg class="skull-icon">
<use xlink:href="#skull-icon"></use>
<svg>
<svg class="skull-icon">
<use xlink:href="icons.svg#skull-icon"></use>
<svg>
BESTFRIEND
Reusable, modular code is your
<?php themeslug_icon( 'skull' ); ?>
[themeslug-icon name="skull"]
TASKRUNNERSYour other best friend forever.
SOCIALMENUS?
But what about my
add_filter( 'wp_nav_menu_objects', 'themeslug_social_menu' );
<a href=“http://twitter.com/sarahsemark”>Twitter</a>
<a href=“http://twitter.com/sarahsemark”>
<svg class=“twitter-icon”>
…
</svg>
<span class=“screen-reader-text”>Twitter</sp...
JETPACKsocial menus
add_theme_support( ‘jetpack-social-menu‘ );
function themeslug_social_menu() {
if ( has_nav_menu( ‘jetpack-social-menu‘ ) ...
REACT?
what if I’m using
const SkullIcon = React.createClass( {
render() {
return(
<svg className=“skull-icon”>
…
</svg>
)
}
} );
ACCESSIBLE?
How do I make sure all this is
<svg aria-hidden="true">
<use xlink:href="#skull-icon"></use>
</svg>
<svg role="img" aria-labelledby=“skull-title">
<title id="#skull-title">skull</title>
<use xlink:href="#skull-icon"></use>...
<a href="#" aria-label="Delete all items">
<svg>
<use xlink:href="#skull-icon"></use>
</svg>
</a>
FALLBACKS
a quick word about
<svg>
…
<image src="skull.png" xlink:href=""/>
</svg>
THANKSFORFLYING!
QUESTIONS?
@sarahsemark
github.com/sarahmonster/easy-as-svg
triggersandsparks.com/talks/svg-icons
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
Upcoming SlideShare
Loading in …5
×

How i learned to stop using icon fonts and love svg (again)

Once upon a time, icon fonts were the exciting new tools we used to build better websites. That time has passed, yet most of us are still relying on a tool that’s no longer relevant in the landscape of the modern web. In this talk, I’ll discuss the various merits of making the switch to SVG and some neat things you can do with SVG. We’ll touch on various use cases, and present some ideas for determining the workflow that’s best suited to your individual needs. We’ll provide some practical tips and tools for using SVG sprites more easily and efficiently in your work. We’ll also discuss ideas for implementing SVG within WordPress themes and plugins in a simple, consistent manner. Along the way, we’ll discuss various challenges you may encounter, and how to approach them. By the time we’re done, you’ll be fully armed to start using SVG today!

  • Login to see the comments

How i learned to stop using icon fonts and love svg (again)

  1. 1. really and SVG How I learnt to stop using icon fonts
  2. 2. Hello!
  3. 3. 1000WORDS A picture is worth
  4. 4. Tree Woods Forest
  5. 5. 🍆🙈🦄
  6. 6. 7 6 6 4 51 9 1 9 8B 2 Coyuya El Rosario Autobuses del Norte La Villa - Basílica Eduardo Molina San Antonio Abad Pantitlán Impulsora Nezahualcóyotl Villa de Aragón Bosque de Aragón Deportivo Oceanía Oceanía Terminal Aérea Hangares Agrícola Or Canal de Sa PueblaCiudad Deportiva VelódromoMixiuhca Zaragoza Gómez Farías Boulevard Puerto Aéreo Balbuena Moctezuma Romero RubioRicardo Flores Magón San Lázaro Canal del Norte Candelaria Merced Fray Servando Jamaica Tepito Morelos LagunillaGaribaldi Allende Zócalo Isabel la Católica Pino Suárez Chabacano San Juan de Letrán Salto del Agua Bellas Artes Hidalgo Guerrero Aragón Talismán Consulado → La Raza Bondojito Martín Carrera Deportivo 18 de Marzo Potrero Lindavista Insituto del Petróleo VallejoNorte 45FerreríaAzcapotzalcoTezozómoc Aquiles Serdán Camarones Refinería San Joaquín Polanco Auditorio Constituyentes Buenavista Tlatelolco Misterios Valle Gómez Juárez RevoluciónSan Cosme NormalColegio Militar PopotlaCuitláhuacPanteones Cuatro Caminos Tacuba Observatorio Tacubaya Juanacatlán Chapultepec Sevilla Insurgentes Cuauhtémoc Balderas Doctores Obrera Niños Héroes Hospital General Centro MédicoPatriotismo Chilpancingo Lázaro Cárdenas Viaducto
  7. 7. ICONSmake for better communication
  8. 8. Menu
  9. 9. ICONSmake for better websites
  10. 10. 38!
  11. 11. SPRITELYCSS solutions
  12. 12. .twitter-icon { background-position: 102px -48px; }
  13. 13. RESCUE! Icon fonts to the
  14. 14. HACK Icon fonts are a
  15. 15. SVG. What’s next?
  16. 16. <svg> <path class="heart" d="M25.79,10.7a4.77,4.77,..." /> </svg>
  17. 17. BOTHER? Why should I
  18. 18. REASONSyou should switch to SVG 5
  19. 19. SEMANTICS. Perhaps you care about 1
  20. 20. 2 ACCESSIBILITYis better out-of-the-box.
  21. 21. <svg> <title>Heart</title> <desc>A fluorescent teal heart.</desc> <path class="heart" d="M25.79,10.7a4.77,4.77,..." /> </svg>
  22. 22. LOOKBETTER Your icons are going to 3
  23. 23. .heart { fill: #B9FDFE; }
  24. 24. .heart { fill: none; stroke: #B9FDFE; stroke-width: 2px; }
  25. 25. .heart { fill: #B9FDFE; } .arrow { fill: #FD80E5; }
  26. 26. .arrow { transition: all 0.5s ease-in; transform: translate
 (20, -20); }
  27. 27. FAILUREis an awful lot less likely. 4
  28. 28. BROWSERS Happier 5
  29. 29. 4.5per cent of global browser usage
  30. 30. OKAYI’m convinced. HOWDOIDOIT?
  31. 31. POISON Choose your
  32. 32. DATAURI
  33. 33. .skull-icon { background-image: url(‘data:image/svg +xmldata:application/octet- stream;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3J nLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgoJPHN0eWxl IHR5cGU9InRleHQvY3NzIj4KCS5oZWFydCB7CgkJZmlsbDogI2I2Z mRmTQsNS42NSw3LjQ3LDguNDEsMi41NC0yLjc2LDUuMTItNS40OSw 3LjUtOC40MSwxLjczLTIuMTEsMi45MS0zLjg1LDIuMzgtNi42M2gw WiIgLz4KPC9zdmc+Cg…’); background-repeat: no-repeat; background-position: 50% 50%; height: 1em; width: 1em; }
  34. 34. <span class=“skull-icon”> </span>
  35. 35. SYMBOL
  36. 36. <svg style="display: none"> <symbol id="heart-icon"> <...> </symbol> <symbol id="skull-icon"> <...> </symbol> </svg>
  37. 37. <svg class="skull-icon"> <use xlink:href="#skull-icon"></use> <svg>
  38. 38. <svg class="skull-icon"> <use xlink:href="icons.svg#skull-icon"></use> <svg>
  39. 39. BESTFRIEND Reusable, modular code is your
  40. 40. <?php themeslug_icon( 'skull' ); ?>
  41. 41. [themeslug-icon name="skull"]
  42. 42. TASKRUNNERSYour other best friend forever.
  43. 43. SOCIALMENUS? But what about my
  44. 44. add_filter( 'wp_nav_menu_objects', 'themeslug_social_menu' );
  45. 45. <a href=“http://twitter.com/sarahsemark”>Twitter</a>
  46. 46. <a href=“http://twitter.com/sarahsemark”> <svg class=“twitter-icon”> … </svg> <span class=“screen-reader-text”>Twitter</span> </a>
  47. 47. JETPACKsocial menus
  48. 48. add_theme_support( ‘jetpack-social-menu‘ ); function themeslug_social_menu() { if ( has_nav_menu( ‘jetpack-social-menu‘ ) ) : ?> <nav class=“jetpack-social-navigation” role=“navigation”> <?php wp_nav_menu( array ( ‘theme_location’ => ‘jetpack-social-menu’, ‘link_before’ => ‘’, ‘link_after’ => ‘’, ) ); ?> </nav> <?php endif; }
  49. 49. REACT? what if I’m using
  50. 50. const SkullIcon = React.createClass( { render() { return( <svg className=“skull-icon”> … </svg> ) } } );
  51. 51. ACCESSIBLE? How do I make sure all this is
  52. 52. <svg aria-hidden="true"> <use xlink:href="#skull-icon"></use> </svg>
  53. 53. <svg role="img" aria-labelledby=“skull-title"> <title id="#skull-title">skull</title> <use xlink:href="#skull-icon"></use> </svg>
  54. 54. <a href="#" aria-label="Delete all items"> <svg> <use xlink:href="#skull-icon"></use> </svg> </a>
  55. 55. FALLBACKS a quick word about
  56. 56. <svg> … <image src="skull.png" xlink:href=""/> </svg>
  57. 57. THANKSFORFLYING!
  58. 58. QUESTIONS? @sarahsemark github.com/sarahmonster/easy-as-svg triggersandsparks.com/talks/svg-icons

×