Thème Paris.fr

Image

macro @cImg

@cImg peut être utilisé pour générer des éléments img avec un texte alternatif et une description optionnelle pour l'accessibilité

Exemple

Paris map.

<@cImg src='images/pexels-picjumbocom-196645.jpg' class='img-fluid p-4' alt='Sketch for new website' title='Sketch for new website' />
<@cImg src='images/carte.png' alt='Paris map' labelDescribedBy='Paris map.' showLabelDescribedBy=true />

<img src="images/pexels-picjumbocom-196645.jpg" alt="Sketch for new website" title="Sketch for new website" class="img-fluid p-4" id="sketch_for_new_website">
<img src="images/carte.png" alt="Paris map" title="" class="img-fluid" aria-descridedby="descridedby_paris_map" id="paris_map">
<p id="descridedby_paris_map">Paris map.</p>

Paramètres

Generates an HTML img element with responsive styling and optional accessible description. Supports aria-describedby for enhanced accessibility on skin pages.

The @cImg macro is designed to create responsive images with accessibility features. It allows you to specify an image source, alternative text, and an optional description that can be visually hidden or shown for screen readers.

"alt" parameter is now mandatory !

src (string)
required
- Source URL of the image file
alt (string)
required
- Alternative text for the image. Default: ''
title (string)
required

new
- Title text for the image. Default: ''
id (string)
optional
- Unique identifier for the image element. Default: ''
class (string)
optional
- CSS class(es) applied to the image element. Default: 'img-fluid'
labelDescribedBy (string)
optional
- Descriptive text added via aria-describedby for accessibility. Default: ''
showLabelDescribedBy (boolean)
optional
- If true, displays the labelDescribedBy text visually; otherwise it is hidden. Default: false
params (string)
optional
- Additional HTML attributes for the image element. Default: ''

Figure - Balise HTML5

macro @cFigure

@cFigure peut être utilisé pour générer des éléments figure HTML5 avec un texte alternatif et une description optionnelle pour l'accessibilité

Exemple

<@cFigure caption='City hall at sunset'>
    <@cImg src='images/city-hall.jpg' alt='City hall' />
</@cFigure>
<@cFigure class='figure text-center'>
    <@cImg src='images/banner.jpg' alt='Welcome banner' />
</@cFigure>

<figure class="figure">
<img src="images/image-filter-map-01.png" alt="Kiosk" title="" class="img-fluid w-25" id="kiosk">
<figcaption class="figure-caption">kiosk in a small parc</figcaption>
</figure>
<figure class="figure text-center">
<img src="images/banner_v.jpg" alt="Welcome banner" title="" class="img-fluid" id="welcome_banner">
</figure>

Paramètres

Generates an HTML figure element with an optional caption. Wraps images or illustrations with a semantic container on skin pages.

caption (string)
optional
- Caption text displayed below the figure via a figcaption element. Default: ''
id (string)
optional
- Unique identifier for the figure element. Default: ''
class (string)
optional
- CSS class(es) applied to the figure element. Default: 'figure'
params (string)
optional
- Additional HTML attributes for the figure element. Default: ''

Picture - Balise HTML5

macro @cPicture

@cPicture peut être utilisé pour générer des éléments picture HTML5 avec des sources d'images réactives et un texte alternatif pour l'accessibilité

Exemple

<@cPicture>
    <@cPictureSrc srcset='images/banner_v-large.webp' media='(min-width: 768px)' type='image/webp' />
    <@cPictureSrc srcset='images/banner_v-small.webp' type='image/webp' />
    <@cImg src='images/banner_v.jpg' alt='Welcome banner' />
</@cPicture>

<picture>
<source srcset="images/banner_large.webp" media="(min-width: 768px)" type="image/webp">
<source srcset="images/banner_small.webp" type="image/webp">
<img src="images/banner_v.jpg" alt="Welcome banner" title="" class="img-fluid" id="welcome_banner">
</picture>

Paramètres

Generates an HTML picture element for responsive image rendering. Wraps source and img elements to serve different images based on media queries.

id (string)
optional
- Unique identifier for the picture element. Default: ''
class (string)
optional
- CSS class(es) applied to the picture element. Default: ''
params (string)
optional
- Additional HTML attributes for the picture element. Default: ''

Icône

macro @cIcon

@cIcon peut être utilisé pour 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"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"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"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 est la pour compatibilité avec le thème "Lutece" par défaut. Utiliser la macro @cParisIcon pour utiliser la libraire adaptée au thème "Paris.fr".

Generates an icon element using a CSS icon font.

name (string)
optional
- Name of the icon. Default: 'check'
class (string)
optional
- Additional CSS classes for the icon. Default: ''
id (string)
optional
- HTML id attribute. Default: ''
params (string)
optional
- Additional HTML attributes. Default: ''
prefix (string)
optional
- CSS class prefix for the icon font. Default: 'ti ti-'
type (string)
optional
- HTML element type to render. Default: 'span'

Icône Thème Paris.fr

macro @parisIcon

@parisIcon peut être utilisé pour générer des icônes SVG du pack Paris avec support 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"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"data-mce-svg="paris-icon paris-icon-check" aria-labelledby="paris-icon-check-paris-title-137600400744251" focusable="false" role="img">
<title id="paris-icon-check-paris-title-137600400744251">Validated</title>
<use href="#paris-icon-check"></use>
</svg>
<svg class="paris-icon paris-icon-close ms-2 main-color"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

Generates an SVG icon from the Paris icon sprite set with accessibility support.

name (string)
required
- Name of the icon from the Paris icon pack
type (string)
optional
- Accessibility type, either 'decorative' (hidden from screen readers) or 'informative' (announced by screen readers). Default: 'decorative'
id (string)
optional
- HTML id attribute. Default: ''
class (string)
optional
- Additional CSS classes for the icon. Default: ''
title (string)
optional
- Accessible title for informative icons. Default: ''
params (string)
optional
- Additional HTML attributes. Default: ''

@parisIcon

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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"data-mce-svg="paris-icon paris-icon-check" focusable="false" role="img">
<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"data-mce-svg="paris-icon paris-icon-check-circle" focusable="false" role="img">
<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"data-mce-svg="paris-icon paris-icon-exclamation-circle" focusable="false" role="img">
<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"data-mce-svg="paris-icon paris-icon-exclamation" focusable="false" role="img">
<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"data-mce-svg="paris-icon paris-icon-stop-circle" focusable="false" role="img">
<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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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"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 par défaut

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):

Image

macro @cImg

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Figure - Balise HTML5

macro @cFigure

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Picture - Balise HTML5

macro @cPicture

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Icône

macro @cIcon

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Icône Thème Paris.fr

macro @parisIcon

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

@parisIcon

Exemple

Navigation

Function

State

Theme

Logo

Extrait de code HTML

Bibliothèque d'icones par défaut

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