Traduction de editable-svg-icons.md
#121
Conversation
| @@ -1,30 +1,30 @@ | |||
| --- | |||
| title: Editable SVG Icon Systems (EN) | |||
| title: Système d'Icônes SVG Éditable (FR) | |||
There was a problem hiding this comment.
Tu doit enlever (FR) quand c'est traduit
| type: cookbook | ||
| order: 4 | ||
| --- | ||
|
|
||
| ## Base Example | ||
| ## Exemple de Base |
There was a problem hiding this comment.
Pour tous les titres merci de mettre que le premier mot en majuscules (A l'exception des noms propres)
Exemple de Base => Exemple de base
A faire pour tous les titres
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>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:</p> | ||
| <p>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</p> |
There was a problem hiding this comment.
Cette méthode consiste a à créer des composants icônes modifiables en tant que composants :
un accent sur le a
modifiable avec un s
en tant que composant : précise que l'icône est construit comme un composant
mettre ":" à la fin
| * 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 |
There was a problem hiding this comment.
rendue => rendues
accessible => accessibles
|
|
||
| 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. |
There was a problem hiding this comment.
Créons d'abord un dossier pour stocker tous nos icônes.
j'ajouterais "tous" pour être le plus proche de l'original
Donnons à nos icônes leurs des noms normalisés.
accent sur a
suppression de "leurs"
| @@ -43,9 +43,9 @@ We'll create a base icon (`IconBase.vue`) component that uses a slot. | |||
| </template> | |||
| ``` | |||
|
|
|||
| 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 `<title>` 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é. | |||
There was a problem hiding this comment.
tel quel - le seul => tel quel, le seul
| @@ -1,30 +1,30 @@ | |||
| --- | |||
| title: Editable SVG Icon Systems (EN) | |||
| title: Système d'Icônes SVG Éditable (FR) | |||
There was a problem hiding this comment.
Éditable ou modifiable ? (cf ligne 9)
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>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:</p> | ||
| <p>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</p> |
There was a problem hiding this comment.
Je te propose ceci :
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 modifiables en tant que composants. Voici quelques avantages à procéder ainsi :
| * 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 |
There was a problem hiding this comment.
éditer ca parrait mieux. Plus naturel
There was a problem hiding this comment.
Il ne me semble pas... http://www.question-orthographe.fr/question/comment-ecrit-on-tirer-parti/
There was a problem hiding this comment.
non, c'est parti. Et je vote aussi pour "modifier", éditer est un anglicisme qui n'a pas la même signification en français (http://www.larousse.fr/dictionnaires/francais/%C3%A9diter/27850)
| * 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 |
There was a problem hiding this comment.
Je garderais la formulation initiale :
Elles sont animables
| * 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 |
|
|
||
| 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. |
There was a problem hiding this comment.
l'ensemble des icônes
icon loader => icône de chargement ?
Grace à cette méthode, on s'évitera des souffrances et beaucoup de temps perdu.
=>
Cette méthode nous permet d'économiser du temps.
|
|
||
| ## 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 `<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 `<symbol/>` entre des balises `<defs>` et de les référencer dans des balises `<use>`. |
There was a problem hiding this comment.
utilisées différemment => utilisées de diffèrentes manières.
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>.
|
|
||
| ## Alternative Patterns | ||
| ## Alternative possibles |
|
|
||
| * [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 à chaud. En effet, la balise `<use>` 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. |
There was a problem hiding this comment.
Ils génèrent aussi deux propriétés viewBox imbriqués avec deux systèmes de coordonnées relatifs. Cela peut rendre l'implémentation plus délicate.
|
Voila, j'ai fait une premiere passe de fix en tenant compte de vos remarques. |
|
Top @elevatebart ! Merci les gars ! Je passe mon tour pour cette relecture. Un peu moins de temps pendant 2 semaines ;) |
|
|
||
| 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) | ||
|
|
||
| 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 `<use>` 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. | ||
| 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 `<use>` réagit bizarrement sous certains navigateurs avec les dessins complexes. ls génèrent aussi deux propriétés `viewBox` imbriqués avec deux systèmes de coordonnées. Cela peut rendre l'implémentation plus délicate. |
There was a problem hiding this comment.
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.
MachinisteWeb
requested review from
Kocal,
MachinisteWeb and
sylvainpolletvillard
| * 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 |
|
|
||
| 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 tous nos icônes. Donnons à nos icônes des noms normalisés. Cela facilitera leurs appels plus tard. |
There was a problem hiding this comment.
Donnons des noms normalisés à nos icônes, cela permettra ensuite de les appeler plus facilement.
|
|
||
| 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: |
|
|
||
| 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. Cette méthode nous économisera du temps. |
There was a problem hiding this comment.
Mettre le icon loader en italique, ou alors le traduire non ?
There was a problem hiding this comment.
les loader sont un concept inventé par WebPack. Je ne pense pas qu'une traduction soit necessaire. Par contre l'itallique est une tres bonne idee. Cela facilitera la lecture.
There was a problem hiding this comment.
Oui c'est vrai, de plus je viens de remarquer qu'on n'en n'avait pas parlé ici #4.
Go garder loader dans ce cas 🙂
| @@ -1,30 +1,30 @@ | |||
| --- | |||
| title: Editable SVG Icon Systems (EN) | |||
| title: Système d'Icônes SVG Éditable | |||
There was a problem hiding this comment.
Éditables ? plus loin on parle d'icônes éditables
There was a problem hiding this comment.
Qu'est ce que tu penses de Dynamique ?
| * 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 |
There was a problem hiding this comment.
non, c'est parti. Et je vote aussi pour "modifier", éditer est un anglicisme qui n'a pas la même signification en français (http://www.larousse.fr/dictionnaires/francais/%C3%A9diter/27850)
| * Les icônes sont faciles à éditer à 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 |
There was a problem hiding this comment.
Elles sont déclarées en HTML, donc aucune requête HTTP n'est nécessaire
| * 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 |
There was a problem hiding this comment.
retirer "facilement", non présent dans le texte original
There was a problem hiding this comment.
C'est vrai. Je vais changer. Mais du coup, ca fait mentir la doc. En effet il est tout a fait possible de rendre accessible les images d'un site en PNG. il suffit de les decouper en leurs parties uniques et de leur donner des alt. C'est juste moche.
|
|
||
| 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 toutes nos icônes. Donnons des noms normalisés à nos icônes, cela permettra ensuite de les appeler plus facilement. |
There was a problem hiding this comment.
, et nommons-les suivant une convention pour les retrouver facilement.
There was a problem hiding this comment.
D'abord on cree un dossier pour stocker toutes nos icones, puis on les nomme suivant un convention pour les retrouver facilement ?
|
|
||
| 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 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. |
There was a problem hiding this comment.
Les designers peuvent changer d'avis. Les exigences du produit peuvent aussi évoluer.
recréer ou modifier
Cette méthode peut vous éviter ces contrariétés et vous faire gagner du temps.
|
|
||
| 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 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 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>`. |
There was a problem hiding this comment.
quand vous avez un certain nombre d'icônes qui sont utilisées de différentes façons à travers votre site.
définir une sprite sheet
|
|
||
| ## Alternative Patterns | ||
| ## Alternatives possibles |
There was a problem hiding this comment.
Patterns alternatifs
|
|
||
| Other tooling to help manage SVG icons includes: | ||
| Quelques outils annexes qui pourront vous aider : |
There was a problem hiding this comment.
Quelques autres outils pour aider à gérer les inclusions 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 à chaud. 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és avec deux systèmes de coordonnées. Cela peut rendre l'implémentation plus délicate. |
There was a problem hiding this comment.
à chaud => à l'exécution
|
Merci pour vos retours, je réaprends le Français. C'est fou a quelle vitesse on perd sa langue maternelle. |
| role="presentation" | ||
| > | ||
| <title id="scissors" lang="en">Scissors Animated Icon</title> | ||
| <title id="scissors" lang="fr">Icône de ciseaux animée</title> |
There was a problem hiding this comment.
l'aria-labelledby doit correspondre à l'id du title. Donc soit scissors dans les 2 cas, soit ciseaux dans les 2 cas.
| @@ -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" | |||
There was a problem hiding this comment.
traduit en ciseaux ici, mais toujours leftscissor ligne 112
|
|
||
| <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'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> |
There was a problem hiding this comment.
Editables ou Dynamique ?
Système d'icônes (avec un accent circonflexe)
|
|
||
| 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 chaque icône. Cette méthode peut vous éviter ces contrariétés et vous faire gagner du temps. |
There was a problem hiding this comment.
mettre à jour
devient nécessaire si on souhaite la même modification sur chaque icône => "chaque" icône peut prêter à confusion. "tous les icônes" me semble plus clair.
| <path id="bk" fill="#fff" d="M0 0h100v100H0z"/> | ||
| <g ref="leftscissor"> | ||
| <g ref="ciseauxgauche"> |
There was a problem hiding this comment.
ciseaugauche plutôt que ciseauxgauche (1 seul ciseau). Même remarque pour ciseaudroit
| @@ -1,30 +1,30 @@ | |||
| --- | |||
| title: Editable SVG Icon Systems (EN) | |||
| title: Système d'Icônes SVG Dynamique | |||
There was a problem hiding this comment.
c'est le système ou les icônes qui sont dynamiques ? d'instinct j'aurais mis dynamiques au pluriel
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>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:</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 en ligne modifiable en tant que composants. Voici quelques avantages à procéder ainsi :</p> |
|
|
||
| <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, super facile a modifier à la volée!!</p> |
There was a problem hiding this comment.
un point d'exclamation suffit ici, d'autant qu'il n'y en a pas dans le texte d'origine
There was a problem hiding this comment.
J'avoue je me suis un peu lache la dessus, je devais etre fatigue. Dsl
|
|
||
| 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 tous les icônes. Cette méthode peut vous éviter ces contrariétés et vous faire gagner du temps. |
|
Hello @elevatebart , encore quelques petites retours de mon côté. |
| * 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 |
There was a problem hiding this comment.
Normalement en Français,
Chaque élément est suivi d’un point virgule, hormis le dernier accompagné d’un point.
Après j'ai très rarement vu cette règle appliquée.
Dans tous les cas, les majuscules en début de tiret me semblent être de trop.
|
|
||
| Our script will look like this, we'll have some defaults so that our icon will be rendered consistently unless we state otherwise: |
There was a problem hiding this comment.
Ressemble à ça prend un accent sur le a
There was a problem hiding this comment.
J'ai l'impression que l'interface GitHub a eu un soucis, j'ai ajouté un commentaire sur la partie Française évidemment.
|
|
||
| ```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 --> |
|
|
||
| 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: |
|
|
||
| <p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p> |
There was a problem hiding this comment.
En Français, contrairement à l'Anglais, il y a un espace avant les ? et !.
Et aussi à modifier à la volée.
|
|
||
| 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 tous les icônes. Cette méthode peut vous éviter ces contrariétés et vous faire gagner du temps. |
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>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:</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 en ligne modifiable en tant que composants. Voici quelques avantages à procéder ainsi :</p> |
There was a problem hiding this comment.
Traduire inline par en ligne me semble bizarre, je ne comprends pas vraiment la phrase en Français.
Par contre je n'ai pas de meilleure traduction à proposer.
There was a problem hiding this comment.
Ca t'irait si je disais inline ?
Si on voulait paraphraser "icones en ligne", on dirait pobablement "icone SVG codées en ligne dans le html sans reference a des fichier image externe".
Peut-etre cela donnera des idees, je n'ai pas d'autre idee pourle moment non plus.
Toute suggestion est la bienvenue.
There was a problem hiding this comment.
Inline me va très bien mais mon avis est sans doute biaisé, car je comprends bien l'Anglais, alors que la traduction française s'adresse a priori justement aux personnes maîtrisant plus le Français que l'Anglais.
J'ai vraiment pas d'avis pertinent sur la question, la plupart des tutoriels que j'ai suivis étaient en Anglais et utilisaient donc inline.
@MushuLeDragon qu'en penses-tu ?
There was a problem hiding this comment.
Salut, pourquoi pas traduire inline en sur la même ligne ou de la même ligne ? Après je n'ai peut être pas bien compris le contexte de la phrase. A vous de me dire.
| @@ -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> | |||
There was a problem hiding this comment.
Pourquoi rajouter lorsque ?
Sans être totalement contre je préfère la version précédente.
Mais dans tous les cas ça ferait lorsqu'à.
There was a problem hiding this comment.
+1 pour retirer lorsque, ça ne veut rien dire
There was a problem hiding this comment.
C’est une typo, j’ai essayé de faire les modifia au bureau entre deux compiles... paaaaa bien
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>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:</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 en ligne modifiable en tant que composants. Voici quelques avantages à procéder ainsi :</p> |
There was a problem hiding this comment.
Salut, pourquoi pas traduire inline en sur la même ligne ou de la même ligne ? Après je n'ai peut être pas bien compris le contexte de la phrase. A vous de me dire.
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>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:</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> |
There was a problem hiding this comment.
Je propose :
des icônes directement modifiables dans le DOM HTML en tant que composants
ou
des icônes directement modifiables dans le code HTML en tant que composants
There was a problem hiding this comment.
pas de s à directement hein
There was a problem hiding this comment.
Retrait des « s » plus haut donc... huhu...
| * 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 sont animables |
There was a problem hiding this comment.
elles peuvent être animées
(bisarre animable :D)
|
@sylvainpolletvillard, @Kocal, @forresst si vous avez 5 min pour jeter encore un coup d'oeil |
|
@sylvainpolletvillard, @Kocal, @forresst est ce que les modifs que j'ai faites vous vont ? Bon retour ! |
|
Merci @elevatebart ! Je laisse les intéressé lever leur Changes request :) |
|
Arf, désolé j'ai totalement zappé. |
| @@ -43,9 +43,9 @@ We'll create a base icon (`IconBase.vue`) component that uses a slot. | |||
| </template> | |||
| ``` | |||
|
|
|||
| 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 `<title>` 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é. | |||
There was a problem hiding this comment.
<title> ne doit pas être traduit non ?
Vu que c'est une balise HTML ?
There was a problem hiding this comment.
je retire la traduction, c'est vrai que c'est mieux
| <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" /> |
There was a problem hiding this comment.
Est-ce qu'il faut traduire le texte des images ou pas ?
There was a problem hiding this comment.
Bah les commentaires c'est toujours utiles, ca aide a comprendre.
|
|
||
| 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 clic : |
There was a problem hiding this comment.
... dans des composants devient nécessaire lorsque l'on ...
IMO
There was a problem hiding this comment.
Ca m'a l'air mieux effectivement
| @@ -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`. | |||
There was a problem hiding this comment.
les deux côtés des ciseaux s'animent en même temps
réutilisable à qui nous
Et voir la remarque de @sylvainpolletvillard sur la partie GreenSock 👍
|
|
||
| <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> |
There was a problem hiding this comment.
Il y a également un espace avant les : !
|
|
||
| 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/) |
There was a problem hiding this comment.
J'ai souvent lu que c'était pas bien d'utiliser le texte "ici" pour un lien, car tu "perds de l'information".
Je pense que ça serait mieux si ça serait disponibles dans ce [dépôt](...)
|
|
||
| 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 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>`. |
There was a problem hiding this comment.
un certain nombre d'icônes qui sont utilisées
Est-ce que dans ce cas-là, utilisées devrait pas plutôt se conjuguer en genre et en nombre avec un certain nombre ?
(par contre j'en suis pas sûr)
There was a problem hiding this comment.
je vais retirer le "qui sont" lourd et inutile
|
@Kocal, qu'en penses tu? J'ai pas bien compris ta remarque sur GreenSock mais le reste est pris en compte. |
|
C'est good 🙂 Arf, son commentaire s'est perdu dans les reviews... ^^ |
|
@forresst il ne reste plus que toi ;-) 🙏 |
|
@Kocal, je n'ai pas compris. C'est good ? ca veut dire que les changements sont validés ? |
|
J'attendais que tu fasses les modifications à propos de Greensock... 😇 |
|
Bon pour toi @forresst ? |
|
Je vais valider les deux PR, s'il reste des choses à ajuster, on refera une PR ultérieurement. Merci infiniement pour ton travail et ta patience @elevatebart ! Et merci à tous les reviewers ! |
I am ready for criticism...
GO !