Ajustements sur les icônes

(Suite aux réflexions dans !639 (closed))

Dans embedded_svg, au lieu de copier le contenu des svg dans le DOM directement, on devrait utiliser

<svg>
  <use href="#{asset_path(icon_name)}.svg#{icon_name}" />
</svg>

Ça sert exactement à ce qu’on veut faire. Par contre, ça demande quelques ajustements dans les svg:

• il faut que l’élément svg ait un id, tant qu’à faire le même que celui du fichier.
  • En principe, on pourrait utiliser une URL sans fragment pour pointer sur le document entier, mais ça ne semble pas marcher. Peut-être Safari.
  • En réalité, on pourrait même mettre toutes les icônes dans un même fichier svg et avoir chaque icône sous forme d’un <g id="<icon_name>"> (ou un <symbol id="<icon_name>">) dans ce fichier. Je ne sais pas ce qui est plus simple du point de vue de Sketch :)
• pour que le svg prenne la couleur ambiante, il faut comme avant fill="currentColor" (ou stroke="currentColor"). On peut le faire soit dans l’élément englobant (le tag svg dans le DOM du document) ou dans le code svg lui-même. Si des attributs sont présents dans le fichier svg, il ne peuvent pas être surchargés. Peut-être que c’est pénible vis-à-vis de Sketch.

Autre point: certaines icônes dans l’app sont des images libres de droits trouvées ailleurs, pour lesquelles on devrait utiliser nos propres icônes.

WIP: Liste à déterminer ici-même.

Fichiers existants dans le repo:

fichier	mode	usage	source / action	Nouveau symbole
actions/email.svg	colored	landing page	-	distinct file
actions/gitlab.svg	colored	landing page	-	distinct file
actions/mastodon.svg	colored	landing page	-	distinct file
actions/newsletter.svg	colored	landing page	-	distinct file
ajouter.svg	tinted	unused	Ajouter.svg	plus
ajouter_cercle.svg	tinted	new field button	Ajouter_cercle.svg	plus.fill
c-logo.svg	tinted	header on mobile	(dans Sketch)	logo.c
camera.svg	tinted	file picker	remplacer par Image.svg	camera.outline
cartouche_color.svg	tinted	(dans Sketch)		distinct file
center.svg	tinted	rows / new row	remplacer par CadrerCentrer.svg	focus / crosshair
chevron_droite.svg	tinted	dropdown indicator / discrosure / maps index	Chevron_droite.svg	chevron.right
chevron_gauche.svg	tinted	header back button	Chevron_gauche.svg	chevron.left
close.svg	tinted	modal	Erreur.svg (🤦)	cross.svg
cocarto-favicon.svg	tinted	(via tooling)	(dans Sketch)	distinct file
cocarto_logotype.svg	tinted	header	(dans Sketch)	logo.cocarto
color.svg	tinted	unused	Supprimer	x
copy.svg	tinted	share link field copy button	Changer pour un bouton texte (cf Sketch)
download.svg	tinted	unused	Supprimer	x
dragbar_cursor.svg	tinted	dragbar	(dans Sketch)	distinct file
edit.svg	tinted	rows	Remplacer par Modifier.svg	pencil
export_as_image.svg	tinted	map toolbar	Design manquant
exporter.svg	tinted	unused	Supprimer	x
eye.svg	tinted	table	Design manquant	eye.open
eye-off.svg	tinted	table	Design manquant	eye.closed
file.svg	tinted	file / file import	Design manquant (basé sur Export.svg)
file-down.svg	tinted	export button	remplacer par Exporter.svg	file.export
file-up.svg	tinted	import button / upload	remplacer par Importer.svg	file.import
frame.svg	tinted	table	Remplacer par Cadrer.svg	frame
language-selector.svg	tinted	header menu	Langage.svg	language
line_string.svg	tinted	new layer	Géométrie/Ligne.svg / Que faire de Ligne.svg	geometry.line_string
lock-closed.svg	tinted	field	Remplacer par Verouiller.svg	lock.closed
lock-opened.svg	tinted	unused	Supprimer ou Remplacer par Deverouiller.svg	lock.open
map-pin.svg	tinted	map toolbar (set default zoom)	Remplacer par CadrerCentrer.svg	x
point.svg	tinted	new layer	Point.svg	geometry.point
polygon.svg	tinted	new layer	Géométrie/Polygone.svg / Que faire de Polygone.svg et PolygoneAlt.svg ?	geometry.polygon
remove_item.svg	tinted	remove file / cancel file import / delete row	Effacer_cercle_aplat.svg / Remplacer par Effacer_cercle.svg / Supprimer.pvg	minus.fill
succes-cercle-vert.svg	tinted	landing page	Succès.svg / Utiliser une version monochrome teintée	distinct file
supprimer.svg	tinted	unused	Supprimer.svg	trash
territory.svg	tinted	new layer	Géométrie/Territoire.svg	geometry.territory
upload-cloud.svg	tinted	new file / new file import	Design Manquant

Icônes dans le sketch :

Fichier	usage / notes	Symbole
Ajouter_cercle.svg	utilisé	plus.fill
Ajouter.svg	à intégrer ?	plus
Cadrer.svg	à utiliser en remplacement	frame
CadrerCentrer.svg	à utiliser en remplacement	focus
Centrer.svg	à intégrer (carte)	crosshair
Champs requis.svg	à intégrer / uniquement en 16px?
Chargement.svg	à intégrer / uniquement en 16px?
Chevron_bas.svg	?	chevron.down
Chevron_droite.svg	ok	chevron.right
Chevron_gauche.svg	ok	chevron.left
Chevron_haut.svg	?	chevron.up
Deverouiller.svg	à utiliser en remplacement	lock.open
Effacer_cercle_aplat.svg	ok	minus.fill
Effacer_cercle.svg	à utiliser en remplacement	minus.outline
Erreur_cercle.svg	à intégrer ?	cross.fill
Erreur.svg	à intégrer ?	cross
Exporter.svg	à utiliser en remplacement	file.export
Filtrer.svg	à intégrer
Image.svg	à utiliser en remplacement	camera.outline
Importer.svg	à utiliser en remplacement	file.import
Langage.svg	ok	language
Ligne.svg	?	x
Localiser.svg	à intégrer	crosshair.point
Modifier.svg	à utiliser en remplacement	pencil
Point.svg	?	x
Polygone.svg	?	x
PolygoneAlt.svg	?	x
Re-ordonner.svg	à intégrer
Rechercher.svg	à utiliser en remplacement (map toolbar)
Succès_cercle.svg	à intégrer en monochrome
Succès.svg	à intégrer
Supprimer.svg	à utiliser en remplacement	trash
Verouiller.svg	à utiliser en remplacement	lock.closed
ZoomIn.svg	à utiliser en remplacement (map toolbar)
ZoomOut.svg	à utiliser en remplacement (map toolbar)

Règles de nommage pour les icônes:

• anglais, minuscules, pas d’accent, tirets;
• nommer les icônes associées de façon ordonnée, par exemple “lock-open” et “lock-closed” plutôt que “open-lock” et “closed-lock”.