diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index dc954abc49..1ac32587f4 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 Dynamiques 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 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 directement modifiables dans le DOM HTML en tant que composants. Voici quelques avantages à procéder ainsi :

-* 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 à modifier à la volée +* elles peuvent être animées +* on peut utiliser des `props` et des `defaults` pour changer leurs dimensions 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 -First, we'll create a folder for all of the icons, and name them in a standardized fashion for easy retrieval: +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 > 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. +Créons 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 `<title>` 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. 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 grâce 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 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,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'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="Editable SVG Icon System: Animated icon" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Editable SVG Icon System: Animated icon</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">Pretty easily accomplished! And easy to update on the fly.</p> +<p style="margin-top:-30px">Pas trop dur ! Et en plus, facile à modifier à la volée.</p> -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](https://github.com/sdras/vue-sample-svg-icons/) -## Additional Notes +## Remarques additionnelles -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 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. -## When To Avoid This Pattern +## Quand éviter 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 `<use>` tags to load them. +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>`. -## Alternative Patterns +## Patterns alternatifs -Other tooling to help manage SVG icons includes: +Quelques autres outils pour aider à gérer le chargement d'icônes SVG : * [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 `<use>` 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 à l'exécution. En effet, la balise `<use>` réagit bizarrement sous certains navigateurs avec les dessins complexes. Ils génèrent aussi deux propriétés `viewBox` imbriquées avec deux systèmes de coordonnées. Cela peut rendre l'implémentation plus délicate.