docs: translate cookbook > editable svg icon systems

Author: naokie

src/cookbook/editable-svg-icons.md

@@ -1,26 +1,26 @@
-# Editable SVG Icon Systems
+# 編集可能な SVG アイコンシステム
 
-## 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
+- 即座に編集することが簡単です
+- アニメーションが可能です
+- 標準的なプロパティとデフォルトを利用して標準サイズを保つことができ、必要に応じて変更することもできます
+- インラインなので 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`
 
-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](/images/editable-svg-icons.jpg 'Docs demo')
 
-We'll create a base icon (`IconBase.vue`) component that uses a slot.
+スロットを利用した基本となるアイコン（`IconBase.vue`）コンポーネントを作成します。
 
 ```html
 <template>
@@ -40,9 +40,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.
+アイコンの `viewBox` に応じて `viewBox` を更新する必要があるだけで、この基本となるアイコンをそのまま使うことができます。この基本では、 `width` と `height` と `iconColor` とアイコン名をプロパティにして、プロパティから動的に更新できるようにしています。名前は `<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 {
@@ -67,32 +67,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` プロパティは、アイコンの周囲のテキスト色を継承します。必要なら、別の色をプロパティとして渡すこともできます。
 
-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 -->
+  <!-- より小さい `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="/images/editable-svg-icons-sizes.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>
@@ -141,27 +141,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` の問題を解決することができます。
 
 <common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" />
 
 <p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</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.
+デザイナーの考えは変わるかもしれません。製品要件は変わります。アイコンシステム全体のロジックを 1 つの基本となるコンポーネントにまとめておけば、すべてのアイコンを素早く更新して、システム全体に広めることができます。アイコンローダーを使っても、場合によってはグローバルな変更を行うために、すべての 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 with 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 アイコンシステムは、サイト全体にさまざまな方法で使われているアイコンがたくさんある場合にとても便利です。1 つのページで同じアイコンを繰り返し使うならば（例えば、各行に削除アイコンのある巨大なテーブル）、すべてのスプライトをスプライトシートにコンパイルして `<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>` タグが複雑な処理をする際に、おかしなクロスブラウザの問題を引き起こす可能性があるからです。2 つの入れ子になった `viewBox` プロパティがあるために、2 つの座標系が存在します。このため実装が少し複雑になります。