You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/cookbook/editable-svg-icons.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ order: 4
14
14
* Tout est dans le html, aucune requête http supplémentaire
15
15
* Elles peuvent facilement être rendues accessibles dynamiquement
16
16
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.
18
18
19
19
> components/icons/IconBox.vue
20
20
> components/icons/IconCalendar.vue
@@ -72,19 +72,19 @@ export default {
72
72
73
73
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.
74
74
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:
@@ -95,7 +95,7 @@ Et si on souhaite afficher l'icône dans d'autres tailles:
95
95
96
96
## Icônes animables
97
97
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:
99
99
100
100
```html
101
101
<template>
@@ -145,7 +145,7 @@ export default {
145
145
146
146
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`.
147
147
148
-
<pdata-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 <ahref="https://codepen.io/team/Vue/pen/dJRpgY/">Système d'icones SVG Editables: Animation</a> by Vue (<ahref="https://codepen.io/Vue">@Vue</a>) on <ahref="https://codepen.io">CodePen</a>.</p><scriptasyncsrc="https://production-assets.codepen.io/assets/embed/ei.js"></script>
148
+
<pdata-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 <ahref="https://codepen.io/team/Vue/pen/dJRpgY/">Système d'icones SVG Editables: Animation</a> by Vue (<ahref="https://codepen.io/Vue">@Vue</a>) on <ahref="https://codepen.io">CodePen</a>.</p><scriptasyncsrc="https://production-assets.codepen.io/assets/embed/ei.js"></script>
149
149
150
150
<pstyle="margin-top:-30px">Pas trop dur! Et en plus, super facile a modifier à la volée!!</p>
151
151
@@ -161,7 +161,7 @@ Ce système d'icônes est particulièrement utile quand la plupart des icônes d
0 commit comments