Traduction de editable-svg-icons.md

src/v2/cookbook/editable-svg-icons.md

@@ -1,18 +1,18 @@
 ---
-title: Système d'Icônes SVG Dynamique
+title: Système d'Icônes SVG Dynamiques
 type: cookbook
 order: 4
 ---
 
 ## Exemple de base
 
-<p>Il y a plusieurs façons de créer un système d'icônes SVG. Une méthode qui tire parti des capacités de Vue est de créer des icônes en ligne modifiable en tant que composants. Voici quelques avantages à procéder ainsi :</p>
+<p>Il y a plusieurs façons de créer un système d'icônes SVG. Une méthode qui tire parti des capacités de Vue est de créer des icônes inline modifiables en tant que composants. Voici quelques avantages à procéder ainsi :</p>
 
-* Les icônes sont faciles à modifier à la volée
-* Elles sont animables
-* On peut utiliser des `props` et des `defaults` pour les dimensionner ou les modifier
-* Elles sont écrites dans le code HTML, donc aucune requête HTTP n'est nécessaire
-* Elles peuvent être rendues accessibles dynamiquement
+* les icônes sont faciles à modifier à la volée
+* elles sont animables
+* on peut utiliser des `props` et des `defaults` pour les dimensionner ou les modifier
+* elles sont écrites dans le code HTML, donc aucune requête HTTP n'est nécessaire
+* elles peuvent être rendues accessibles dynamiquement
 
 D'abord on crée un dossier pour stocker toutes nos icônes, puis on les nomme suivant une convention pour pouvoir les appeler facilement.
 
@@ -45,7 +45,7 @@ Créons un composant icône de base (`IconBase.vue`) disposant d'un `slot`.
 
 Ce composant peut être utilisé tel quel, le seul paramètre à vérifier sera le `viewBox` qui dépendra de celui de vos icônes. Dans l'icône de base, les paramètres `width`, `height`, `iconColor` et `iconName` sont des props pour pouvoir les piloter selon les besoins. La prop `iconName` sera utilisée comme le contenu de la balise `<titre>` et de l'attribut `id` de notre icône SVG pour assurer l'accessibilité. 
 
-Le `<script>` du composant icône de base ressemble a ça. Remarquons les valeurs par défaut. Notre icône sera toujours affichée avec les mêmes hauteur/largeur partout sauf si on les force à changer. 
+Le `<script>` du composant icône de base ressemble à ça. Remarquons les valeurs par défaut. Notre icône sera toujours affichée avec les mêmes hauteur/largeur partout sauf si on les force à changer. 
 
 ```js
 export default {
@@ -82,7 +82,7 @@ Et si on souhaite afficher l'icône dans d'autres tailles :
 
 ```html
 <p>
-  <!-- on peut lui passer une `width` et une `height` plus petite grace aux props -->
+  <!-- on peut lui passer une `width` et une `height` plus petite grâce aux props -->
   <icon-base width="12" height="12" icon-name="write"><icon-write /></icon-base>
   <!-- ou ne rien passer du tout et utiliser la width par défaut : 18 -->
   <icon-base icon-name="write"><icon-write /></icon-base>
@@ -95,7 +95,7 @@ Et si on souhaite afficher l'icône dans d'autres tailles :
 
 ## Icônes animables
 
-Mettre des icônes SVG dans des composants devient clé dès que l'on souhaite les animer. D'autant plus quand cette animation se passe lors d'une interaction. Les SVG `inline` sont la forme de SVG la mieux supportée. Voici comment animer une icône lors d'un click :
+Mettre des icônes SVG dans des composants devient clé dès que l'on souhaite les animer. D'autant plus quand cette animation se passe lors d'une interaction. Les SVG `inline` sont la forme de SVG la mieux supportée. Voici comment animer une icône lors d'un clic :
 
 ```html
 <template>
@@ -147,13 +147,13 @@ Nous avons ajouté des attributs `ref` aux groupes de paths pour pouvoir les ani
 
 <p data-height="300" data-theme-id="0" data-slug-hash="dJRpgY" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Système d'icônes SVG Dynamique : Animation" class="codepen">Voir le Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Système d'icônes SVG Dynamique: Animation</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
 
-<p style="margin-top:-30px">Pas trop dur! Et en plus, super facile a modifier à la volée!!</p>
+<p style="margin-top:-30px">Pas trop dur ! Et en plus, super facile à modifier lorsque à la volée.</p>
 
 D'autres exemples d'animations sont disponibles dans le dépôt [ici](https://github.com/sdras/vue-sample-svg-icons/)
 
 ## Remarques additionnelles
 
-Les designers peuvent changer d'avis. Les exigences du produit peuvent aussi évoluer. Conserver la logique pour l'ensemble des icônes dans un seul composant de base nous permettra de mettre a jour toutes les icônes en modifiant un seul fichier. Même en utilisant un _icon loader_, il existe des situations où recréer ou modifier chaque SVG devient nécessaire si on souhaite la même modification sur tous les icônes. Cette méthode peut vous éviter ces contrariétés et vous faire gagner du temps.
+Les designers peuvent changer d'avis. Les exigences du produit peuvent aussi évoluer. Conserver la logique pour l'ensemble des icônes dans un seul composant de base nous permettra de mettre a jour toutes les icônes en modifiant un seul fichier. Même en utilisant un _icon loader_, il existe des situations où recréer ou modifier chaque SVG devient nécessaire si on souhaite la même modification sur toutes les icônes. Cette méthode peut vous éviter ces contrariétés et vous faire gagner du temps.
 
 ## Quand éviter ce pattern