Thème Paris.fr

Icon

macro @cIcon

@cIcon permet de générer des éléments icône HTML5 avec un texte alternatif et une description optionnelle pour l'accessibilité

Exemple

<@cIcon name='x' />
<@cIcon name='right' class='fs-4 text-primary' />
<@cIcon name='alert-circle' class='text-danger' params='aria-hidden="true"' />

<svg class="paris-icon paris-icon-close decorative" data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
<svg class="paris-icon paris-icon-arrow-right fs-4 text-primary decorative" data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-right"></use>
</svg>
<svg class="paris-icon paris-icon-nef decorative" data-mce-svg="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-nef"></use>
</svg>

Paramètres

Cette macro existe pour la compatibilité avec le thème "Lutece" par défaut. Utilisez la macro @cParisIcon pour utiliser la bibliothèque adaptée au thème "Paris.fr".

Génère un élément icône à l'aide d'une police d'icônes CSS.

name (string)
optional
- Nom de l'icône. Par défaut: 'check'
class (string)
optional
- Classes CSS supplémentaires pour l'icône. Par défaut: ''
id (string)
optional
- attribut id HTML. Par défaut: ''
params (string)
optional
- Attributs HTML supplémentaires. Par défaut: ''
prefix (string)
optional
- Préfixe de classe CSS pour la police d'icônes. Par défaut: 'ti ti-'
type (string)
optional
- Type d'élément HTML à rendre. Par défaut: 'span'

Icône du thème Paris.fr

macro @parisIcon

@parisIcon permet de générer des icônes SVG à partir du pack Paris avec prise en charge de l'accessibilité

Exemple

<@parisIcon name='arrow-right' />
<@parisIcon name='check' type='informative' title='Validated' class='text-success' />
<@parisIcon name='close' class='ms-2 main-color' params='aria-label="Close"' />

<svg class="paris-icon paris-icon-arrow-right decorative" data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-right"></use>
</svg>
<svg class="paris-icon paris-icon-check text-success informative" data-mce-svg="paris-icon paris-icon-check" aria-labelledby="paris-icon-check-paris-title-50527239602791" focusable="false" role="img">
<title id="paris-icon-check-paris-title-50527239602791">Validated</title>
<use href="#paris-icon-check"></use>
</svg>
<svg class="paris-icon paris-icon-close ms-2 main-color decorative" data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img" aria-label="Close">
<use href="#paris-icon-close"></use>
</svg>

Paramètres

Génère une icône SVG à partir du jeu de sprites d'icônes Paris avec prise en charge de l'accessibilité.

name (string)
required
- Nom de l'icône du pack d'icônes Paris
type (string)
optional
- Type d'accessibilité, soit 'decorative' (masquée des lecteurs d'écran) soit 'informative' (annoncée par les lecteurs d'écran). Par défaut: 'decorative'
id (string)
optional
- Attribut HTML id. Par défaut: ''
class (string)
optional
- Classes CSS supplémentaires pour l'icône. Par défaut: ''
title (string)
optional
- Titre accessible pour les icônes informatives. Par défaut: ''
params (string)
optional
- Attributs HTML supplémentaires. Par défaut: ''

Icônes disponibles dans le thème

macro Liste des Icônes

Exemple

Navigation

burger

arrow-double-right

external-link

arrow-left

arrow-right

arrow-up

arrow-down

home

Function

user

plus

agenda

trash

upload

arrow-download

off

dash

disk

search

shield

eye

eye-off

refresh

overview

edit

edit-profile

edit-document

State

check

check-circle

exclamation-circle

exclamation

stop-circle

Theme

file-text

file-euro

file-image

help

play

volume

clock

layout

desk

bell

flag-fr

flag-en

Logo

nef

fc

facebook

instagram

twitter

x

<h3 class="pb-m mt-0">
Navigation</h3>
<div class="row row-cols-6">
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-burger copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-burger" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-burger" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
burger</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-arrow-double-right copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-arrow-double-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-double-right" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
arrow-double-right</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-external-link copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-external-link" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-external-link" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
external-link</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-arrow-left copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-arrow-left" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-left" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
arrow-left</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-arrow-right copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-right" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
arrow-right</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-arrow-up copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-arrow-up" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-up" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
arrow-up</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-arrow-down copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-arrow-down" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-down" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
arrow-down</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-home copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-home" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-home" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
home</p>
</div>
</div>
</div>
</div>
<h3 class="pb-m">
Function</h3>
<div class="row row-cols-6">
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-user copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-user" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-user" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
user</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-plus copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-plus" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
plus</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-agenda copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-agenda" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-agenda" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
agenda</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-trash copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-trash" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-trash" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
trash</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-upload copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-upload" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-upload" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
upload</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-arrow-download copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-arrow-download" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-download" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
arrow-download</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-off copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-off" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
off</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-dash copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-dash" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-dash" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
dash</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-disk copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-disk" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-disk" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
disk</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-search copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-search" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-search" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
search</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-shield copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-shield" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-shield" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
shield</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-eye copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-eye" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
eye</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-eye-off copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye-off" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
eye-off</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-refresh copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-refresh" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-refresh" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
refresh</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-overview copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-overview" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-overview" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
overview</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-edit copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-edit" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-edit" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
edit</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-edit-profile copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-edit-profile" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-edit-profile" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
edit-profile</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-edit-document copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-edit-document" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-edit-document" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
edit-document</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-archive copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-archive" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-archive" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
archive</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-mail copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-mail" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-mail" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
mail</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-like copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-like" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-like" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
like</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-settings copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-settings" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-settings" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
settings</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-filter copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-filter" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-filter" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
filter</p>
</div>
</div>
</div>
</div>
<h3 class="pb-m">
State</h3>
<div class="row row-cols-6">
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-check copy-html main-color informative" data-mce-svg="paris-icon paris-icon-check" aria-labelledby="paris-icon-check-paris-title-272024390441091" focusable="false" role="img">
<title id="paris-icon-check-paris-title-272024390441091"></title>
<use href="#paris-icon-check" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
check</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-check-circle copy-html main-color informative" data-mce-svg="paris-icon paris-icon-check-circle" aria-labelledby="paris-icon-check-circle-paris-title-276596581005961" focusable="false" role="img">
<title id="paris-icon-check-circle-paris-title-276596581005961"></title>
<use href="#paris-icon-check-circle" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
check-circle</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-exclamation-circle copy-html main-color informative" data-mce-svg="paris-icon paris-icon-exclamation-circle" aria-labelledby="paris-icon-exclamation-circle-paris-title-281168771570831" focusable="false" role="img">
<title id="paris-icon-exclamation-circle-paris-title-281168771570831"></title>
<use href="#paris-icon-exclamation-circle" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
exclamation-circle</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-exclamation copy-html main-color informative" data-mce-svg="paris-icon paris-icon-exclamation" aria-labelledby="paris-icon-exclamation-paris-title-285740962135701" focusable="false" role="img">
<title id="paris-icon-exclamation-paris-title-285740962135701"></title>
<use href="#paris-icon-exclamation" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
exclamation</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-stop-circle copy-html main-color informative" data-mce-svg="paris-icon paris-icon-stop-circle" aria-labelledby="paris-icon-stop-circle-paris-title-290313152700571" focusable="false" role="img">
<title id="paris-icon-stop-circle-paris-title-290313152700571"></title>
<use href="#paris-icon-stop-circle" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
stop-circle</p>
</div>
</div>
</div>
</div>
<h3 class="pb-m">
Theme</h3>
<div class="row row-cols-6">
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-file-text copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
file-text</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-file-euro copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-file-euro" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-euro" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
file-euro</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-file-image copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-file-image" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-image" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
file-image</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-help copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-help" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-help" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
help</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-pin copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-pin" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-pin" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
pin</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-play copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-play" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-play" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
play</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-volume copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-volume" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-volume" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
volume</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-clock copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-clock" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-clock" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
clock</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-layout copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-layout" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-layout" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
layout</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-desk copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-desk" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-desk" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
desk</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-bell copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-bell" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-bell" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
bell</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-flag-fr copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-flag-fr" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-flag-fr" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
flag-fr</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-flag-en copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-flag-en" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-flag-en" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
flag-en</p>
</div>
</div>
</div>
</div>
<h3 class="pb-m">
Logo</h3>
<div class="row row-cols-6">
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-nef copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-nef" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
nef</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-fc copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-fc" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-fc" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
fc</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-facebook copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-facebook" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-facebook" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
facebook</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-instagram copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-instagram" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-instagram" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
instagram</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-twitter copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-twitter" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-twitter" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
twitter</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-x copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-x" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-x" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
x</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body ">
<p class="text-center">
<svg class="paris-icon paris-icon-linkedin copy-html main-color decorative" data-mce-svg="paris-icon paris-icon-linkedin" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-linkedin" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
linkedin</p>
</div>
</div>
</div>
</div>

Bibliothèque d'icones disponibles pour

Ajouter des icônes à votre application.

Vous pouvez ajouter des icônes, de préférence désignées par la DICOM, éventuellement "Material Design" et les ajouter aux icônes disponibles pour votre site.

Cette page permet de consulter et d'ajouter des icônes proposées par la DICOM pour le "Thème Paris.fr".

Plus d'informations

Comment ajouter des icônes proposées par la DICOM ?

Vous pouvez rechercher des icônes par nom, catégorie ou description, et les ajouter à votre panier pour les exporter au format SVG.

Pour exporter les icônes sélectionnées, cliquez sur le bouton "Exporter la sélection". Vous pouvez également vider le panier en cliquant sur "Vider le panier".

Les icônes sont classées par catégorie et peuvent être affichées en grille ou en liste.

Les icônes sont fournies au format SVG et peuvent être utilisées dans vos projets avec le thème Paris.fr.

Vous pouvez exporter le SVG individuellement ou générer un pack d'icônes qui sera placé dans un fichier nommé "themeparisfr_extra_icons_pack.ftl". Une fois le fichier téléchargé vous le mettrez dans votre projet de site sur votre repository (Gitlab généralement) dans l'arborescence suivante: "WEB-INF/templates/skin/site". Les icônes contenues dans le fichier seront alors dispobible pour inclusion avec la macro "@parisIcon".

<@parisIcon name='nomdemonicone' />

Le nom de l'icone est le nom défini dans l'id de vos "SVG", attribut id de la balise "symbol" en retirant le préfix "paris-icon-" par exemple :

Icône Air de jeux barre — Icône "Air de jeux barre" avec id "paris-icon-aire-de-jeux-barre"

<@parisIcon name='air-de-jeux-barre' />

Comment ajouter des icônes "Material Design" ?

Pour ajouter des icônes "Material Design", vous pouvez les rechercher sur la bibliothèque d'icônes "Material Design" de Google et les télécharger au format SVG. Ensuite, vous pouvez les ajouter à votre projet de la même manière que les icônes proposées par la DICOM.

Ajouter le contenu du svg dans le fichier "themeparisfr_extra_icons_pack.ftl" en suivant la même structure que pour les icônes DICOM.

Remplace les balises "svg" en balise "symbol", supprimer l'attribut "xmlns" et ajouter l'identifiant selon le modèle suivant : "paris-icon-{monidentifiant}". Par exemple "paris-icon-diversity"

Utilisez l'icône dans vos templates en utilisant la macro "@parisIcon" et en lui fournissant l'id défini dans le fichier "themeparisfr_extra_icons_pack.ftl". Par exemple "diversity".

Rechercher des icônes ( 0 ) :

Epaisseur du trait (0):

Icon

macro @cIcon

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Icône du thème Paris.fr

macro @parisIcon

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Icônes disponibles dans le thème

macro Liste des Icônes

Exemple

Navigation

Function

State

Theme

Logo

Extrait de code HTML

Bibliothèque d'icones disponibles pour

Ajouter des icônes à votre application.

Comment ajouter des icônes proposées par la DICOM ?

Comment ajouter des icônes "Material Design" ?

Icônes à exporter 0