アイコンには、意味があります

このポストはRTL互換のWebプラットフォームを構築する方法について、6部シリーズの第4部です.

アイコン意味

何年も前に、ウェブはどちらかにアイコンを採用しました.時には、私たちも、右側のアイコンを持つテキストを持っているので、アイコンの論理的な意味を読むので、単語/フレーズを読むよりもはるかに高速です.
ここでは、アイコンとその論理的な意味のいくつかの例です.
🗑️ - ゴミは、除去/破壊的な行動を意味します
💾 - フロッピーディスクは、保存アクションを意味します;
➕ - プラスは追加アクションを意味します
...

RTL文脈におけるアイコン

しかし、なぜアイコンがRTLやLTRで何か違うことがありますか?さて、私が意図して示した例では、絶対的な違いはありませんが、これらを見てみましょう.
➡️ - 右の矢とは
⬅️ - 左の矢とは
今、空白のスペースを埋めるために試みることができますがif 途中で、あなたは1つの展望についてだけ考えています.
私の言いたいことは➡️ あなたがLTR視点からそれを見ているならば、前進することは意味します、他の、それは正反対です.同じことが⬅️, あなたがそれを見て方向志向に応じて異なる意味を持つ.

Webプラットフォームにおけるアイコンの取り組み

RTL互換のプラットフォームのほとんどでは、3種類のアイコンがあります.だから、アイコンの正当性に取り組む最初のステップは、それらの3つのタイプのいずれかに分類する必要があります.
あなたがそれらを分類するように頼むべきである質問は以下の通りです.

Should this icon flip in RTL?

それを念頭に置いて、これらの3セットのアイコンを作成できます.
1 -双方向のアイコンは、RTLとLTRで同じに見えるものです.

2 -一方向のアイコンは、通常、その方向に応じて異なる意味を持っているので、ドキュメントの方向に応じて回転する必要があります.

3 -ブランドのアイコンは、これらのアイコンは、ブランドやそのロゴは、方向や言語に関係なく、同じままにする必要がありますエンティティを表します.

コード実装

このアイコンの分類を行った後、あなたはすでにプロセスにかなり遠いです.次のステップは、このロジックをコードで作成し、ここで私のアドバイスは、単一のIcon すべてのプラットフォームのアイコンの真実の源として機能するコンポーネント.
そのように、あなたはすべてのコンポーネントを制御するラッパーを持っているし、反転/1つのアイコンを反転しない心配を持っていない.

import React from 'react';
import styled from 'styled-components';

const IconWrapper = styled('div')`
  html[dir='rtl'] &.flip-icon {
    transform: scaleX(-1);
  }
`;

const Icon = ({ name, onClick, noFlip }) => {
  return (
    <IconWrapper onClick={onClick} className={noFlip ? '' : 'flip-icon'}>
      <i className={`icon icon-${name}`} title={name} />
    </IconWrapper>
  );
};

export default Icon;

上記のようにラッパーを使用することで、実装の詳細をあまり見ていないので、簡単にnoFlip あなたが本当にフリップ(ブランドのもの)をしたくないアイコンにプロップ、および他のすべてのアイコンは、すでに覆われている!

結論

1 -あなたのアイコンをよく見て、事前に分類するので、簡単にコードを実装するときに必要なものを逆にすることができます.
2 - Aを作成するIcon ラッパーとすべてのアイコンの真実の源として機能するコンポーネント.これはRTL対LTR論理が生きるべきところです.

次の章

次の章では、外部コンポーネントを詳しく見ていきます.
これらのシリーズで最新のアップデートで調整されたままでいるために、私について来てください!