Skip to content

Commit 06fdac1

Browse files
committed
ajout des espaces avant les :
1 parent dc6869f commit 06fdac1

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ order: 4
1414
* Tout est dans le html, aucune requête http supplémentaire
1515
* Elles peuvent facilement être rendues accessibles dynamiquement
1616

17-
Créons d'abord un dossier pour stocker tous nos icônes. Donnons à nos icônes des noms normalisés. Cela facilitera leurs appels plus tard.
17+
Créons d'abord un dossier pour stocker toutes nos icônes. Donnons des noms normalisés à nos icônes, cela permettra ensuite de les appeler plus facilement.
1818

1919
> components/icons/IconBox.vue
2020
> components/icons/IconCalendar.vue
@@ -72,19 +72,19 @@ export default {
7272

7373
La valeur `currentColor` de la prop `iconColor` donne aux icônes la couleur - `fill` - du texte qui l'encadre. On peut modifier cette couleur simplement en passant une prop au composant.
7474

75-
Voici un exemple d'utilisation, avec le contenu de `IconWrite.vue` comme path du SVG:
75+
Voici un exemple d'utilisation, avec le contenu de `IconWrite.vue` comme path du SVG :
7676

7777
```html
7878
<icon-base icon-name="write"><icon-write /></icon-base>
7979
```
8080

81-
Et si on souhaite afficher l'icône dans d'autres tailles:
81+
Et si on souhaite afficher l'icône dans d'autres tailles :
8282

8383
```html
8484
<p>
8585
<!-- on peut lui passer une `width` et une `height` plus petite grace aux props -->
8686
<icon-base width="12" height="12" icon-name="write"><icon-write /></icon-base>
87-
<!-- ou ne rien passer du tout et utiliser la width par défaut: 18 -->
87+
<!-- ou ne rien passer du tout et utiliser la width par défaut : 18 -->
8888
<icon-base icon-name="write"><icon-write /></icon-base>
8989
<!-- ou même l'agrandir :) -->
9090
<icon-base width="30" height="30" icon-name="write"><icon-write /></icon-base>
@@ -95,7 +95,7 @@ Et si on souhaite afficher l'icône dans d'autres tailles:
9595

9696
## Icônes animables
9797

98-
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:
98+
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 :
9999

100100
```html
101101
<template>
@@ -145,7 +145,7 @@ export default {
145145

146146
Nous avons ajouté des attributs `ref` aux groupes de paths pour pouvoir les animer. Comme les deux cotés des ciseaux s'anime en même temps, nous allons écrire une fonction réutilisable a qui nous allons passer des `ref`. Nous pouvons compter sur GreenSock pour gérer la compatibilité de l'animation entre navigateurs notamment le problème de `transform-origin`.
147147

148-
<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 Éditables: Animation" class="codepen">Voir le Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Système d'icones SVG Editables: 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>
148+
<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 Éditables : Animation" class="codepen">Voir le Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Système d'icones SVG Editables: 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>
149149

150150
<p style="margin-top:-30px">Pas trop dur! Et en plus, super facile a modifier à la volée!!</p>
151151

@@ -161,7 +161,7 @@ Ce système d'icônes est particulièrement utile quand la plupart des icônes d
161161

162162
## Alternatives possibles
163163

164-
Quelques outils annexes qui pourront vous aider:
164+
Quelques outils annexes qui pourront vous aider :
165165

166166
* [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader)
167167
* [svgo-loader](https://github.com/rpominov/svgo-loader)

0 commit comments

Comments
 (0)