Icons

Principe général

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.

gulp
// SPRITE SVG
function spritesvg() {
    return src(config.sprite.src)
        .pipe(plumber())
        .pipe(svgSprite({
            mode: {
                symbol: { 
                    dest: './',
                    sprite: 'sprite.svg',
                    render: {
                        symbol: {
                            template: config.sprite.htmlTemplate,
                            dest: config.sprite.htmlDest
                        }
                    }
                }
            }
        }))
        .pipe(dest(config.sprite.out));
}
PHP
$svgId = 'angle-right';
$svgSize = 'svg'; // svg - svg-sm - svg-lg - svg-xl
include('inc/common/compo/svgsprite.php');
HTML (clic droit > inspecter :))

    


    


    

4 tailles d'icones prédéfinies existent (cf. page sizing) et il est possible d'ajouter une classe svg-sm ou svg-lg ou svg-lg.

Configuration
Thème
Bases
Atomes
Molécules
Organismes
Projet GC
Projet KIOSQUE