Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 4, 2018
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6a0ecf
translated cookbook/editable-svg-icons.md
Jinjiang Mar 18, 2018
8cf0486
Update editable-svg-icons.md
Jinjiang Apr 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 35 additions & 35 deletions src/v2/cookbook/editable-svg-icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
title: Editable SVG Icon Systems
title: 可编辑的 SVG 图标系统
type: cookbook
order: 4
---

## Base Example
## 简单的示例

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 的能力，那就是把可编辑的内联图标创建为组件。这样做有好多好处：

* 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
* 图标易于实时修改
* 图标可以带动画
* 你可以使用标准的 prop 和默认值来将图标保持在一个典型的尺寸并随时按需改变它们
* 图标是内联的，所以不需要额外的 HTTP 请求
* 可以动态地使得图标可访问

First, we'll create a folder for all of the icons, and name them in a standardized fashion for easy retrieval:
首先，我们将为所有的图标创建一个文件夹，并将这些图标以一种标准化的方式命名以便获取它们：

> components/icons/IconBox.vue
> components/icons/IconCalendar.vue
> components/icons/IconEnvelope.vue
> `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/)
这里有一个示例的仓库，你可以看到全部的配置：[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')
![网站文档](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screendocs.jpg '文档 demo')

We'll create a base icon (`IconBase.vue`) component that uses a scoped slot.
我们将会创建一个基础图标 (`IconBase.vue`) 组件，并使用了一个无作用域的插槽。

```html
<template>
Expand All @@ -43,9 +43,9 @@ We'll create a base icon (`IconBase.vue`) component that uses a scoped 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`, `color`, and name of the icon props so that it can be dynamically updated with props. The name will be used for both the title `id` for accessibility, and the `title`.
你可以像这样使用这个基础图标，唯一可能要做的就是根据你图标的 `viewBox` 来更新其 `viewBox`。在基础图标里会有 `width`、`height`、`color` 以及图标的名字等 prop，这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 `<title>` 的内容及其用于提供可访问性的 `id` 上。

Our script will look like this, we'll have some defaults so that our icon will be rendered consistently unless we state otherwise:
我们的脚本是下面这样的，我们设了一些默认值，这样在没有特别设置的情况下图标渲染出来就是一致的：

```js
export default {
Expand All @@ -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.
`currentColor` 会成为 `fill` 的默认值，于是图标就会继承周围文字的颜色了。我们也可以根据需求传递一个不一样的颜色的 prop。

We can use it like so, with the only contents of IconWrite.vue containing the paths inside the icon:
我们可以这样使用它，通过 `IconWrite.vue` 将图标的路径包含于其中，作为其唯一的内容：

```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:
现在，如果我们想要创建更多种尺寸的图标，我们可以简单的这样做：

```html
<p>
<!--you can pass in a smaller width and height as props-->
<!-- 你可以通过 prop 传递更小的 `width` 和 `height` -->
<icon-base width="12" height="12" icon-name="write"><icon-write /></icon-base>
<!--or you can use the default, which is 18-->
<!-- 或者你可以使用默认值，即 18 -->
<icon-base icon-name="write"><icon-write /></icon-base>
<!--or make it a little bigger too :) -->
<!-- 或者让它更大一些 :) -->
<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
## 带动画的图标

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:
当我们想要赋予它们动画，尤其是在一个交互动作的时候，在组件中控制图标是非常方便的。内联 SVG 对各种交互行为都有最高级的支持。这里有一个图标在点击之后产生动画的基本的示例：

```html
<template>
Expand Down Expand Up @@ -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.
我们通过 `ref` 将我们需要移动的路径做了分组，因为这把剪刀的两侧需要同时移动，所以我们会创建一个传入 `ref` 的可复用的函数。并使用 GreenSock 帮助我们完成动画并解决 `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 style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p>
<p style="margin-top:-30px">很容易做到吧！并且很容易实时更新。</p>

You can see more animated examples in the repo [here](https://github.com/sdras/vue-sample-svg-icons/)
你可以在[这个仓库](https://github.com/sdras/vue-sample-svg-icons/)看到更多动画的示例。

## Additional Notes
## 注意事项

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
## 何时避免使用这个模式

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.
当你有许多图标用在你网站不同的地方时，这类 SVG 图标系统是非常有用的。如果你只在一个页面上重复使用相同的图标很多次 (比如一个大表格中每行的删除图标)，可能把它们编译到一个雪碧图表并通过 `<use>` 标签来加载会更好。

## Alternative Patterns
## 其它替代方案

Other tooling to help manage SVG icons includes:
其它帮助你管理 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.
这些工具会在编译时打包 SVG，但是在运行时编辑它们会有一些麻烦，因为 `<use>` 标签在处理一些复杂的事情时存在浏览器兼容问题。同时它们会给你两个嵌套的 `viewBox` 属性，这是两套坐标系。所以实现上稍微复杂了一些。