Translated cookbook/editable-svg-icons.md #689

Jinjiang · 2018-03-18T13:33:20Z

Thanks.

Justineo · 2018-04-03T04:28:35Z

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

 type: cookbook
 order: 4
 ---

-## Base Example
+## 基础示例


这些段落是不是应该在 cookbook 范围内统一？前两篇是 simple example

是的，最好是 Simple Example

Justineo · 2018-04-03T06:44:55Z

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


-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:
+我们有很多创建一套 SVG 图标系统的方式，但是有一种方法能够充分发挥 Vue 的能力，那就是创建可编辑的内联图标。这样做有好多好处：


「创建……的方式有很多」？

把可编辑的内联图标创建为组件？

Justineo · 2018-04-03T06:47:30Z

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

-* 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
+* 图标易于在线编辑


「在线编辑」是不是有一种用户自己编辑的感觉，「实时修改」如何

Justineo · 2018-04-03T06:47:44Z

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

-* They are inline, so no HTTP requests are necessary
-* They can be made accessible dynamically
+* 图标易于在线编辑
+* 图标是带动画的


可以带动画？

Justineo · 2018-04-03T06:48:32Z

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

+* 图标是带动画的
+* 你可以使用标准的 prop 和默认值来将图标保持在一个典型的尺寸并随时按需改变它们
+* 图标是内联的，所以不需要额外的 HTTP 请求
+* 可以动态的使得图标可访问


Justineo · 2018-04-04T05:45:13Z

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

@@ -143,27 +144,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.
+我们通过 `refs` 将我们需要移动的路径做了分组，因为这把剪刀的两侧需要同时移动，所以我们会创建一个传入 `refs` 的可复用的函数。并使用 GreenSock 帮助我们完成动画并解决 `transform-origin` 的浏览器兼容性问题。


我觉得原文应该写成 refs，这里应该就翻译成 ref。

Justineo · 2018-04-04T05:46:03Z

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


 <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 style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p>
+<p style="margin-top:-30px">很容易做到吧！并且很容易在线更新。</p>


实时更新？

Justineo · 2018-04-04T05:49:48Z

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


-## Additional Notes
+## 额外的注意事项


是不是就写注意事项就行了？

Justineo · 2018-04-04T05:49:59Z

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


-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.
+设计师可能会改变他们的主义。产品需求也可能会变更。在一个基础组件中保持整个图标系统的逻辑，意味着你可以快速更新你所有的图标并快速丰富你的整个图标系统。甚至通过图标加载器，有些情况下需要你重新创建或编辑每个 SVG 来完成全局的改动。这个方法可以节约你的时间，减少你的痛苦。


主义 → 主意

Justineo · 2018-04-04T05:51:32Z

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


-## When To Avoid This Pattern
+## 合适避免使用这个模式


合适 → 何时

translated cookbook/editable-svg-icons.md

f6a0ecf

Jinjiang requested a review from Justineo March 18, 2018 13:33

Justineo reviewed Apr 4, 2018

View reviewed changes

Update editable-svg-icons.md

8cf0486

Justineo approved these changes Apr 4, 2018

View reviewed changes

Jinjiang merged commit dd6ab16 into master Apr 4, 2018

Jinjiang deleted the cookbook-svg branch April 4, 2018 08:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translated cookbook/editable-svg-icons.md #689

Translated cookbook/editable-svg-icons.md #689

Jinjiang commented Mar 18, 2018

Justineo Apr 3, 2018

Jinjiang Apr 4, 2018

Justineo Apr 3, 2018

Justineo Apr 3, 2018

Justineo Apr 3, 2018

Justineo Apr 3, 2018

Justineo Apr 3, 2018

Justineo Apr 4, 2018

Justineo Apr 4, 2018

Justineo Apr 4, 2018

Justineo Apr 4, 2018

Justineo Apr 4, 2018


		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:
		我们有很多创建一套 SVG 图标系统的方式，但是有一种方法能够充分发挥 Vue 的能力，那就是创建可编辑的内联图标。这样做有好多好处：


		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.
		设计师可能会改变他们的主义。产品需求也可能会变更。在一个基础组件中保持整个图标系统的逻辑，意味着你可以快速更新你所有的图标并快速丰富你的整个图标系统。甚至通过图标加载器，有些情况下需要你重新创建或编辑每个 SVG 来完成全局的改动。这个方法可以节约你的时间，减少你的痛苦。


		## When To Avoid This Pattern
		## 合适避免使用这个模式

Translated cookbook/editable-svg-icons.md #689

Translated cookbook/editable-svg-icons.md #689

Conversation

Jinjiang commented Mar 18, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment