From a1c82b8c08c133389ac808a0f5720c9c9cab1101 Mon Sep 17 00:00:00 2001 From: Bart Ledoux Date: Wed, 28 Mar 2018 01:17:52 -0500 Subject: [PATCH 01/17] traduction du SVG cookbook --- src/v2/cookbook/editable-svg-icons.md | 68 +++++++++++++-------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index dc954abc49..84637dbad1 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -1,30 +1,30 @@ --- -title: Editable SVG Icon Systems (EN) +title: Système d'Icônes SVG Éditable (FR) type: cookbook order: 4 --- -## Base Example +## Exemple de Base -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

There are many ways to create an SVG Icon System, but one method that takes advantage of Vue's capabilities is to create editable inline icons as components. Some of the advantages of this way of working is:

+

Il existe plusieurs façons de construire un système d'icônes SVG. Une, en particulier, permet d'utiliser toute la puissance de Vue. Cette méthode consiste a créer des composants icônes modifiable. Voici quelques-uns des avantages

-* They are easy to edit on the fly -* They are animatable -* You can use standard props and defaults to keep them to a typical size or alter them if you need to -* They are inline, so no HTTP requests are necessary -* They can be made accessible dynamically +* Les icônes sont faciles à éditer à la volée +* On peut les animer +* On peut utiliser des `props` et des `defaults` pour les dimensionner ou les modifier. +* Tout est dans le html, aucune requête http supplémentaire +* Elles peuvent facilement être rendue accessible dynamiquement -First, we'll create a folder for all of the icons, and name them in a standardized fashion for easy retrieval: +Créons d'abord un dossier pour stocker nos icônes. Donnons a nos icônes leurs des noms normalisés. Cela facilitera leurs appels plus tard. > components/icons/IconBox.vue > components/icons/IconCalendar.vue > components/icons/IconEnvelope.vue -Here's an example repo to get you going, where you can see the entire setup: [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/) +Voici un exemple du système une fois terminé. [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/) ![Documentation site](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screendocs.jpg 'Docs demo') -We'll create a base icon (`IconBase.vue`) component that uses a slot. +Commençons par créer un composant icône de base (`IconBase.vue`) disposant d'un `slot`. ```html ``` -You can use this base icon as is- the only thing you might need to update is the `viewBox` depending on the `viewBox` of your icons. In the base, we're making the `width`, `height`, `iconColor`, and name of the icon props so that it can be dynamically updated with props. The name will be used for both the `` content and its `id` for accessibility. +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é. -Our script will look like this, we'll have some defaults so that our icon will be rendered consistently unless we state otherwise: +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. ```js export default { @@ -70,32 +70,32 @@ export default { } ``` -The `currentColor` property that's the default on the fill will make the icon inherit the color of whatever text surrounds it. We could also pass in a different color as a prop if we wish. +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. -We can use it like so, with the only contents of `IconWrite.vue` containing the paths inside the icon: +Voici un exemple d'utilisation, avec le contenu de `IconWrite.vue` comme path du SVG: ```html <icon-base icon-name="write"><icon-write /></icon-base> ``` -Now, if we'd like to make many sizes for the icon, we can do so very easily: +Et si on souhaite afficher l'icône dans d'autres tailles: ```html <p> - <!-- you can pass in a smaller `width` and `height` as props --> + <!-- on peut lui passer une `width` et une `height` plus petite grace aux props --> <icon-base width="12" height="12" icon-name="write"><icon-write /></icon-base> - <!-- or you can use the default, which is 18 --> + <!-- ou ne rien passer du tout et utiliser la width par défaut: 18 --> <icon-base icon-name="write"><icon-write /></icon-base> - <!-- or make it a little bigger too :) --> + <!-- ou même l'agrandir :) --> <icon-base width="30" height="30" icon-name="write"><icon-write /></icon-base> </p> ``` <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Screen%20Shot%202018-01-01%20at%204.51.40%20PM.png" width="450" /> -## Animatable Icons +## Icônes Animables -Keeping icons in components comes in very handy when you'd like to animate them, especially on an interaction. Inline SVGs have the highest support for interaction of any method. Here's a very basic example of an icon that's animated on 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 click: ```html <template> @@ -104,10 +104,10 @@ Keeping icons in components comes in very handy when you'd like to animate them, viewBox="0 0 100 100" width="100" height="100" - aria-labelledby="scissors" + aria-labelledby="ciseaux" role="presentation" > - <title id="scissors" lang="en">Scissors Animated Icon + Icône de ciseaux animée @@ -143,27 +143,27 @@ export default { } ``` -We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser. +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`. -

See the Pen Editable SVG Icon System: Animated icon by Vue (@Vue) on CodePen.

+

Voir le Pen Système d'icones SVG Editables: Animation by Vue (@Vue) on CodePen.

-

Pretty easily accomplished! And easy to update on the fly.

+

Pas trop dur! Et en plus, super facile a modifier à la volée!!

-You can see more animated examples in the repo [here](https://github.com/sdras/vue-sample-svg-icons/) +D'autres exemples d'animations sont disponibles dans le dépôt [ici](https://github.com/sdras/vue-sample-svg-icons/) -## Additional Notes +## Remarques Additionelles -Designers may change their minds. Product requirements change. Keeping the logic for the entire icon system in one base component means you can quickly update all of your icons and have it propagate through the whole system. Even with the use of an icon loader, some situations require you to recreate or edit every SVG to make global changes. This method can save you that time and pain. +Les designers changent d'avis. Les besoins produit aussi. Conserver la logique pour l'ensemble des icons 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 éditer chaque SVG devient nécessaire si on souhaite la même modification sur chaque icône. Grace à cette méthode, on s'évitera des souffrances et beaucoup de temps perdu. -## When To Avoid This Pattern +## Quand eviter ce pattern -This type of SVG icon system is really useful when you have a number of icons that are used in different ways throughout your site. If you're repeating the same icon many times on one page (e.g. a giant table a delete icon in each row), it might make more sense to have all of the sprites compiled into a sprite sheet and use `` tags to load them. +Ce système d'icônes est particulièrement utile quand la plupart des icônes du site sont différentes ou utilisées différemment. Si la même icône est répétée de nombreuses fois sur la même page, il peut être plus malin de définir un sprite SVG contenant des `` entre des balises `` et de les référencer dans des balises ``. -## Alternative Patterns +## Alternative possibles -Other tooling to help manage SVG icons includes: +Quelques outils annexes qui pourront vous aider: * [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) * [svgo-loader](https://github.com/rpominov/svgo-loader) -These tools bundle SVGs at compile time, but make them a little harder to edit during runtime, because `` tags can have strange cross-browser issues when doing anything more complex. They also leave you with two nested `viewBox` properties and thus two coordinate systems. This makes the implementation a little more complex. +Ces outils compilent les SVG en même temps que le bundle webpack, mais rendent la modification des icônes plus compliquée à chaud. En effet, la balise `` réagit bizarrement sous certains navigateurs avec les dessins complexes. De plus, deux `viewBox` l'un dans l'autre, sont spécifies, donc deux systèmes de coordonnées relatives. Cela peut rendre l'implémentation plus ardue. From cc69ce287b1f3501dd9a1475f6e1bb9b12e48613 Mon Sep 17 00:00:00 2001 From: Bart Ledoux Date: Wed, 28 Mar 2018 10:19:01 -0500 Subject: [PATCH 02/17] Various rewords and typos --- src/v2/cookbook/editable-svg-icons.md | 28 +++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index 84637dbad1..4b55c56e31 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -1,20 +1,20 @@ --- -title: Système d'Icônes SVG Éditable (FR) +title: Système d'Icônes SVG Éditable type: cookbook order: 4 --- -## Exemple de Base +## Exemple de base -

Il existe plusieurs façons de construire un système d'icônes SVG. Une, en particulier, permet d'utiliser toute la puissance de Vue. Cette méthode consiste a créer des composants icônes modifiable. Voici quelques-uns des avantages

+

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 éditables en tant que composants. Voici quelques avantages à procéder ainsi :

* Les icônes sont faciles à éditer à la volée -* On peut les animer +* Elles sont animables * On peut utiliser des `props` et des `defaults` pour les dimensionner ou les modifier. * Tout est dans le html, aucune requête http supplémentaire -* Elles peuvent facilement être rendue accessible dynamiquement +* Elles peuvent facilement être rendues accessibles dynamiquement -Créons d'abord un dossier pour stocker nos icônes. Donnons a nos icônes leurs des noms normalisés. Cela facilitera leurs appels plus tard. +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. > components/icons/IconBox.vue > components/icons/IconCalendar.vue @@ -43,7 +43,7 @@ Commençons par créer un composant icône de base (`IconBase.vue`) disposant d' ``` -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 `` et de l'attribut `id` de notre icône SVG pour assurer l'accessibilité. +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 `` et de l'attribut `id` de notre icône SVG pour assurer l'accessibilité. Le ` +

Voir le Pen Système d'icones SVG Editables: Animation by Vue (@Vue) on CodePen.

Pas trop dur! Et en plus, super facile a modifier à la volée!!

@@ -161,7 +161,7 @@ Ce système d'icônes est particulièrement utile quand la plupart des icônes d ## Alternatives possibles -Quelques outils annexes qui pourront vous aider: +Quelques outils annexes qui pourront vous aider : * [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) * [svgo-loader](https://github.com/rpominov/svgo-loader) From a693088894d79119cca70d0d14967cbd004e786e Mon Sep 17 00:00:00 2001 From: Bart Ledoux Date: Sat, 7 Apr 2018 12:17:43 -0500 Subject: [PATCH 05/17] itallique pour icon loader --- src/v2/cookbook/editable-svg-icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index 8d6590c104..70d1bac215 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -153,7 +153,7 @@ D'autres exemples d'animations sont disponibles dans le dépôt [ici](https://gi ## Remarques additionnelles -Les designers changent d'avis. Les besoins produit aussi. Conserver la logique pour l'ensemble des icons 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 éditer chaque SVG devient nécessaire si on souhaite la même modification sur chaque icône. Cette méthode nous économisera du temps. +Les designers changent d'avis. Les besoins produit aussi. Conserver la logique pour l'ensemble des icons 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 éditer chaque SVG devient nécessaire si on souhaite la même modification sur chaque icône. Cette méthode nous économisera du temps. ## Quand éviter ce pattern From 60917aef4cf66180e9780376260d60ccaa5bc07d Mon Sep 17 00:00:00 2001 From: Bart Ledoux Date: Sat, 7 Apr 2018 12:20:28 -0500 Subject: [PATCH 06/17] =?UTF-8?q?icons=20=3D>=20ic=C3=B4nes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/cookbook/editable-svg-icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index 70d1bac215..e5ab81881c 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -153,7 +153,7 @@ D'autres exemples d'animations sont disponibles dans le dépôt [ici](https://gi ## Remarques additionnelles -Les designers changent d'avis. Les besoins produit aussi. Conserver la logique pour l'ensemble des icons 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 éditer chaque SVG devient nécessaire si on souhaite la même modification sur chaque icône. Cette méthode nous économisera du temps. +Les designers changent d'avis. Les besoins produit aussi. 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 éditer chaque SVG devient nécessaire si on souhaite la même modification sur chaque icône. Cette méthode nous économisera du temps. ## Quand éviter ce pattern From 81f255223315b8ceef6653da26aae79817650993 Mon Sep 17 00:00:00 2001 From: Bart Ledoux Date: Mon, 9 Apr 2018 21:07:21 -0500 Subject: [PATCH 07/17] quelques retouches sur les conseils de sylvain --- src/v2/cookbook/editable-svg-icons.md | 28 +++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index e5ab81881c..7d7d049296 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -1,20 +1,20 @@ --- -title: Système d'Icônes SVG Éditable +title: Système d'Icônes SVG Dynamique type: cookbook order: 4 --- ## Exemple de base -

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 éditables en tant que composants. Voici quelques avantages à procéder ainsi :

+

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 :

-* Les icônes sont faciles à éditer à la volée +* 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. -* Tout est dans le html, aucune requête http supplémentaire -* Elles peuvent facilement être rendues accessibles dynamiquement +* 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 -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. +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. > components/icons/IconBox.vue > components/icons/IconCalendar.vue @@ -24,7 +24,7 @@ Voici un exemple du système une fois terminé. [https://github.com/sdras/vue-sa ![Documentation site](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screendocs.jpg 'Docs demo') -Commençons par créer un composant icône de base (`IconBase.vue`) disposant d'un `slot`. +Créons un composant icône de base (`IconBase.vue`) disposant d'un `slot`. ```html ``` -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 `` et de l'attribut `id` de notre icône SVG pour assurer l'accessibilité. +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 `` et de l'attribut `id` de notre icône SVG pour assurer l'accessibilité. 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. @@ -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 clic : +Mettre des icônes SVG dans des composants devient nécessaire lorsque 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> @@ -143,13 +143,13 @@ export default { } ``` -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`. +Nous avons ajouté des attributs `ref` aux groupes de paths pour pouvoir les animer. Comme les deux cotés des ciseaux s'animent en même temps, nous allons écrire une fonction réutilisable à 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`. <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, facile à modifier à 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/) +D'autres exemples d'animations sont disponibles dans le [dépôt](https://github.com/sdras/vue-sample-svg-icons/) ## Remarques additionnelles @@ -157,7 +157,7 @@ Les designers peuvent changer d'avis. Les exigences du produit peuvent aussi év ## Quand éviter ce pattern -Ce système d'icônes est particulièrement utile quand vous avez un certain nombre d'icônes qui sont utilisées de différentes façons à travers votre site. Si la même icône est utilisée de nombreuses fois sur la même page (par exemple, une table géante avec une icône de suppression sur chaque ligne), il peut être plus malin de définir un _sprite_ SVG contenant des `<symbol/>` entre des balises `<defs>` et de les référencer dans des balises `<use>`. +Ce système est particulièrement utile quand vous avez un grand nombre d'icônes utilisées de façons différentes à travers votre site. Si la même icône est utilisée de nombreuses fois sur la même page (par exemple, un tableau avec une icône de suppression sur chaque ligne), il peut être plus optimsé de définir un _sprite_ SVG contenant des `<symbol/>` entre des balises `<defs>` et de les référencer dans des balises `<use>`. ## Patterns alternatifs From 788203baa157619f736397c37db8dea71952bdbb Mon Sep 17 00:00:00 2001 From: Bart Ledoux <ledouxb@me.com> Date: Sat, 2 Jun 2018 15:15:28 -0500 Subject: [PATCH 15/17] fix greensock odduity --- src/v2/cookbook/editable-svg-icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index 147d2c1cf7..9d42cb7048 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -143,7 +143,7 @@ export default { } ``` -Nous avons ajouté des attributs `ref` aux groupes de paths pour pouvoir les animer. Comme les deux cotés des ciseaux s'animent en même temps, nous allons écrire une fonction réutilisable à 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`. +Nous avons ajouté des attributs `ref` aux groupes de paths pour pouvoir les animer. Comme les deux cotés des ciseaux s'animent en même temps, nous allons écrire une fonction réutilisable à qui nous allons passer des `ref`. Nous pouvons utiliser GreenSock pour gérer la compatibilité de l'animation entre navigateurs notamment le problème de `transform-origin`. <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> From 26ed60a04ee886d67fdcd623d8eb93bdefb33e26 Mon Sep 17 00:00:00 2001 From: Bart Ledoux <ledouxb@me.com> Date: Sat, 2 Jun 2018 15:17:01 -0500 Subject: [PATCH 16/17] espace avant le : --- src/v2/cookbook/editable-svg-icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index 9d42cb7048..249614cdd9 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -145,7 +145,7 @@ export default { Nous avons ajouté des attributs `ref` aux groupes de paths pour pouvoir les animer. Comme les deux cotés des ciseaux s'animent en même temps, nous allons écrire une fonction réutilisable à qui nous allons passer des `ref`. Nous pouvons utiliser GreenSock pour gérer la compatibilité de l'animation entre navigateurs notamment le problème de `transform-origin`. -<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 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, facile à modifier à la volée.</p> From 0f81a3c79cd181dc5da1168da75a8d289ea56275 Mon Sep 17 00:00:00 2001 From: Bart Ledoux <ledouxb@me.com> Date: Sat, 2 Jun 2018 15:43:54 -0500 Subject: [PATCH 17/17] revue de la phrase greensock --- src/v2/cookbook/editable-svg-icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index 249614cdd9..1ac32587f4 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -143,7 +143,7 @@ export default { } ``` -Nous avons ajouté des attributs `ref` aux groupes de paths pour pouvoir les animer. Comme les deux cotés des ciseaux s'animent en même temps, nous allons écrire une fonction réutilisable à qui nous allons passer des `ref`. Nous pouvons utiliser GreenSock pour gérer la compatibilité de l'animation entre navigateurs notamment le problème de `transform-origin`. +Nous avons ajouté des attributs `ref` aux groupes de paths pour pouvoir les animer. Comme les deux cotés des ciseaux s'animent en même temps, nous allons écrire une fonction réutilisable à laquelle nous allons passer des `ref`. L'utilisation de _GreenSock_ aide à gérer les problèmes de compatibilité entre navigateurs, notamment les problemes de `transform-origin`. <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>