how i learned to stop using icon fonts and love svg (again)
TRANSCRIPT
really
and SVGHow I learnt to stop using icon fonts
Hello!
1000 WORDSA picture is worth
Tree Woods Forest
🍆🙈🦄
Mexico City
Metro System
TL
TL
3
3
7
76 6
4
4
5
519 A
19
A
8
8B
B
2
2
12
12
Coyuya
El Rosario
Autobusesdel Norte
Indios Verdes
La Villa - Basílica
EduardoMolina
San AntonioAbad Pantitlán
Ciudad Azteca
Plaza Aragón
Olímpica
Ecatepec
Múzquiz
Río de los Remedios
Impulsora
Nezahualcóyotl
Villa de Aragón
Bosque de Aragón
Deportivo Oceanía
Oceanía
Terminal Aérea
Hangares
Agrícola Oriental
Canal de San Juan
Tepalcates
Guelatao
PeñonViejo
Acatitla SantaMarta
Los Reyes La Paz
PueblaCiudadDeportiva
VelódromoMixiuhca
Zaragoza
GómezFarías
Boulevard Puerto Aéreo
Balbuena
Moctezuma
RomeroRubioRicardo Flores
Magón
SanLázaro
Canal delNorte
Candelaria
Merced FrayServando
Jamaica
Tepito
Morelos
LagunillaGaribaldi
Allende
Zócalo
Isabel laCatólica
PinoSuárez
Chabacano
San Juande Letrán
Salto delAgua
Bellas Artes
Hidalgo
Guerrero
Aragón
Talismán
Consulado
→
La Viga
La Raza
Bondojito
MartínCarrera
Deportivo18 de Marzo
Potrero
Lindavista
Politécnico
Insituto delPetróleo
VallejoNorte 45FerreríaAzcapotzalcoTezozómoc
Aquiles Serdán
Camarones
Refinería
San Joaquín
Polanco
Auditorio
Constituyentes
San Pedrode los Pinos
San Antonio
Barrancadel Muerto
Buenavista
Tlatelolco
Misterios
Valle Gómez
Juárez
RevoluciónSanCosme
NormalColegioMilitar
PopotlaCuitláhuacPanteones
CuatroCaminos Tacuba
Observatorio
Tacubaya
Mixcoac
Juanacatlán
Chapultepec
Sevilla
Insurgentes
Cuauhtémoc
Balderas
Doctores
Obrera
NiñosHéroes
HospitalGeneral
CentroMédico
Etiopía
Eugenia
Divisióndel Norte
Zapata
Coyoacán
Viveros
Miguel Ángelde Quevedo
Copilco
Universidad
Patriotismo Chilpancingo Lázaro Cárdenas
Viaducto
Xola
Villa de Cortés
Nativitas
Portales
Ermita
GeneralAnaya
Tasqueña
Tasqueña
Insurgentes Sur Hospital20 de Noviembre
Parque delos Venados
Eje Central Mexicaltzingo
Atlalilco
Culhuacán
San AndrésTomatlán
LomasEstrella
Calle 11 PeriféricoOriente
Tezonco Olivos Nopalera Zapotitlán Tlaltenco Tláhuac
Santa Anita
Iztacalco
Apatlaco
Aculco
Escuadrón 201
Iztapalapa Cerro de la Estrella
UAM-I Constituciónde 1917
Las Torres
Ciudad Jardín
La Virgen
Xotepingo
Nezahualpilli
Registro Federal
Textitlán
El Vergel EstadioAzteca
Huipulco Xomali Periférico Tepepan La Noria Huichapan FranciscoGoitia
Xochimilco
The scale in this map is not 100% geographically accurate, especially for the Tren Ligero.
The logos reproduced herein are copyright of the STC.
This map put together by Richard ([email protected] / @richardmtl )
ICONSmake for better communication
Menu
ICONSmake for better websites
38!
SPRITELYCSS solutions
.twitter-icon { background-position: 102px -48px; }
RESCUE!Icon fonts to the
HACKIcon 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 about1
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,..." /> </svg>
LOOK BETTERYour icons are going to3
.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
BROWSERSHappier
5
4.5per cent of global browser usage
OKAYI’m convinced.
HOW DO I DO IT?
POISONChoose your
DATA URI
.skull-icon { background-image: url(‘data:image/svg+xmldata:application/octet-stream;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgoJPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5oZWFydCB7CgkJZmlsbDogI2I2ZmRmTQsNS42NSw3LjQ3LDguNDEsMi41NC0yLjc2LDUuMTItNS40OSw3LjUtOC40MSwxLjczLTIuMTEsMi45MS0zLjg1LDIuMzgtNi42M2gwWiIgLz4KPC9zdmc+Cg…’); background-repeat: no-repeat; background-position: 50% 50%; height: 1em; width: 1em; }
<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>
BEST FRIENDReusable, modular code is your
<?php themeslug_icon( 'skull' ); ?>
[themeslug-icon name="skull"]
TASK RUNNERSYour other best friend forever.
SOCIAL MENUS?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</span> </a>
JETPACKsocial menus
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; }
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> </svg>
<a href="#" aria-label="Delete all items"> <svg> <use xlink:href="#skull-icon"></use> </svg> </a>
FALLBACKSa quick word about
<svg> … <image src="skull.png" xlink:href=""/> </svg>
THANKS FOR FLYING!
QUESTIONS?@sarahsemark
github.com/sarahmonster/easy-as-svg
triggersandsparks.com/talks/svg-icons