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

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