Il existe plusieurs façons de gérer les pictos sur un projet :
via une fonticon (librairie fontawesome ou fonticon sur mesure)
via un sprite svg
via des fichiers svg en dur
Nous allons utiliser la technique du sprite svg
Sprite SVG
Via gulp et à partir des fichiers svg sélectionnés, un fichier sprite est généré et les pictos sont disponibles via une balise svg avec l'id correspondant pour n'afficher que celui concerné.
address-card
analytics
anchor
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
archive
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-down
arrow-from-bottom
arrow-from-left
arrow-from-right
arrow-from-top
arrow-left
arrow-right
arrow-square-down
arrow-square-left
arrow-square-right
arrow-square-up
arrow-to-bottom
arrow-to-left
arrow-to-right
arrow-to-top
arrow-up
asterisk
atom
atom-alt
award
bahai
ban
barcode
barcode-alt
bars
bath
bell
book
book-open
bookmark
box
box-alt
box-ballot
box-open
boxes
building
bullhorn
bus-alt
calendar-alt
camera-alt
capsules
certificate
check
check-circle
check-square
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-square-down
chevron-square-left
chevron-square-right
chevron-square-up
chevron-up
circle
circle-solid
clipboard
clipboard-check
clipboard-user
clock
cog
cogs
coin
comment
comment-check
comment-dots
comment-exclamation
comment-lines
comments
construction
cookie-bite
copy
credit-card
cube
cubes
database
desktop
desktop-alt
diamond
dice-d10
dice-d12
dice-d20
dice-d4
dice-d6
dice-d8
digging
dolly
dolly-flatbed-alt
dolly-flatbed-empty
edit
engine-warning
envelope
envelope-open-text
exchange
exclamation-circle
exclamation-square
exclamation-triangle
external-link
external-link-square
eye
eye-slash
facebook-f
file
file-archive
file-check
file-edit
file-export
file-image
file-import
file-pdf
file-search
film-alt
filter
flag
flag-alt
flask
flower-tulip
folder
folder-open
folders
fragile
futbol
gem
ghost
gift
glass-champagne
globe
globe-africa
google
google-plus-g
graduation-cap
hard-hat
hexagon
history
hockey-puck
home-lg-alt
id-badge
id-card
image
inbox
inbox-in
inbox-out
industry-alt
info-circle
info-square
instagram
lamp-desk
landmark
laptop
layer-group
leaf
lightbulb
lightbulb-on
link
linkedin-in
list-alt
location-arrow
location-circle
lock
lock-alt
lock-open
lock-open-alt
luggage-cart
map
map-marked-alt
map-marker-alt
map-marker-check
map-signs
marker
microphone-alt
minus
minus-circle
minus-square
mobile
mobile-android
money-bill
network-wired
paint-roller
palette
paper-plane
paperclip
paste
pause-circle
paypal
pen
pen-alt
pencil
pencil-alt
phone
phone-alt
phone-laptop
piggy-bank
pinterest-p
plane
planet-moon
planet-ringed
play-circle
plug
plus
plus-circle
plus-square
portrait
power-off
presentation
print
puzzle-piece
question-circle
question-square
quote-left
quote-right
receipt
redo
repeat
reply
reply-all
rocket-launch
route-highway
route-interstate
ruler-combined
running
sack
save
search
search-plus
seedling
server
share
share-all
share-square
shield
shield-check
shipping-fast
shopping-bag
shopping-basket
shopping-cart
sign-in
sign-out
sliders-h
sliders-v
smile
sort
sort-down
sort-up
star
star-solid
sticky-note
store
subway
suitcase
swatchbook
sync
tablet
tablet-android
tachometer-alt
tag
tasks
ticket
times
times-circle
times-square
tools
trash-alt
truck
tv
tv-alt
twitter
undo
university
unlock
unlock-alt
upload
ups
user
user-alt
user-circle
user-edit
user-friends
user-hard-hat
user-headset
users
viadeo
video
vimeo-v
whatsapp
youtube
Comment cela fonctionne ?
Tous les svg "bruts" sont rangés dans le dossier "src/icon/sprite". Le lancement de la commande "spritesvg" dans la console gulp va compiler ces images en un seul fichier "www/data/sprite/sprite.svg" et mettre à jour le template de la documentation ici présent. Il suffit ensuite d'appeler le svg avec son id comme indiqué ci-dessous.
Il est également possible de maintenir manuellement le fichier sprite svg. Cela est possible mais il faut nettoyer les fichiers avant d'en copier/coller le code et maintenir manuellement la documentation.