外部リンクや新しいタブ用のアイコン３つメモ

メモです。

1. 外部リンクアイコン（新しいタブで開く）

アイコン説明

このアイコンは、外部サイトのリンクを新しいタブで開くことを示します。四角形の外側に飛び出す矢印が特徴で、視覚的にリンク先が外部サイトであることを強調します。特にユーザビリティやアクセシビリティの向上を図りたい場合に有効です。

実装例

<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M18 13V18C18 18.5304 17.7893 19.0391 17.4142 19.4142C17.0391 19.7893 16.5304 20 16 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V8C4 7.46957 4.21071 6.96086 4.58579 6.58579C4.96086 6.21071 5.46957 6 6 6H11" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M14 4H20V10" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M10 14L20 4" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

---

2. ウィンドウ/タブのシンプルアイコン

アイコン説明

こちらは新しいウィンドウやタブでコンテンツが開くことを示すアイコンです。ウィンドウ自体のシルエットを模したデザインで、リンクが外部か内部かに関わらず、ページ遷移を別タブで行う際に適しています。

実装例

<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none" viewBox="0 0 19 19">
  <path fill="#000" fill-rule="evenodd" d="M14.87 4.956H7.435v5.783h7.435V4.956ZM5.783 3.304v9.087h10.74V3.304H5.782Z" clip-rule="evenodd"/>  <path fill="#000" fill-rule="evenodd" d="M2.479 5.783H4.13v8.26h9.913v1.653H2.479V5.783Z" clip-rule="evenodd"/></svg>

---

3. ブラウザタブアイコン

アイコン説明

このアイコンは、ブラウザのタブやウィンドウの機能に焦点を当てています。新しいウィンドウまたはタブでの操作を視覚的に示すため、リンクがどのように開かれるかを直感的に表現しています。外部リンクというよりは、新しいページが同じサイト内で別タブで開かれる際に適しています。

実装例

<svg xmlns="http://www.w3.org/2000/svg" width="10.5" height="8" viewBox="0 0 10.5 8">
  <g transform="translate(-484 -7096.407)">
    <path d="M6883,6032.841h7.826v-5.652" transform="translate(-6396.827 1071.067)" fill="none" stroke="#d0d1d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
    <rect width="7.5" height="5" rx="1" transform="translate(484 7096.407)" fill="#d0d1d4"/>
  </g>
</svg>