自作SVGマニュアル

SVGのデザイン方針

• simple line iconに似せる。
  • 線幅、角丸の大きさ、情報密度などに留意
• 色は#FFFFFFで作成（実装の時はあまり関係ないけど）

SVGの書き出し

• イラレの書き出し機能にバグがあるようなので、XDにコピペで持ってきてから書き出し
• ファイルサイズを最適化(最小化)にチェック
• 画像が小さいので、vscodeでsvgを開き、width,heightを消すと確認しやすい。

コンポーネント化手順

svgファイル内の記述を整理

• svgファイルをvscodeで開く
  • ドラッグ＆ドロップでも、アプリ指定で開くでも、なんでもOK
• イラレ作業用の記述を削除
  • 不要なタグ、<g> , <style>を消す
  • <path>,<rect>内のclassを消す
  • SVGデータ内のクラスは基本的にイラレ作業用のものなので、ぜんぶ消しちゃってOK
• 透明な箱（当たり判定）を設定する
  • SVGタグ直下くらいに<rect width="XX" height="YY"/>という感じの簡素な正方形パスがあるので、これにfillOpacity="0"を追加
  • この透明な正方形は、SVGの見た目を整えるために必要
• <path>タグ内、長い記述を折り返す
  • パスの文字列が長いとエラーが出るので、適当な場所で改行
  • 改行位置が悪いと表示がぶっ壊れるので注意

jsxでコンポーネント化

• growi/src/client/js/components/iconsにjsxファイルを作成し、reactの定形文↓をコピペ

import React from 'react';

const ~~~~Icon = () => (

//ここにsvg貼る

);

export default ~~~~Icon;

svgの内容をコピペ

• //ここにsvg貼るの部分にコピペ
• 何事もなければこれで完成

実装時の方針

• 個別ファイルでコンポーネント化、必要に応じて呼び出し。
  • 例外：使用箇所が限定的な場合、１ファイルにまとめてコンポーネント化（Edit nav のアイコンなど）

import React from 'react';

const ~~~~Icon = () => (

//ここにsvg貼る
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="xx"
    height="yy"
    viewBox="0 0 XX YY"
  >
      <rect width="XX" height="YY" fillOpacity="0" /> 
      <path d="~~~~~~~~~" />
      <path d="~~~~~~~~~" />
      <path d="~~~~~~~~~" />
  </svg>
//ここまでsvgのコピペ

);


export default ~~~~Icon;

データ保管

SVG命名規則

• grwicon-○○○？（検討中）

作業データ保管場所

• 保管場所：Gitlab　Git(Design系LFS) external_link
  • .../designs/iconsに最新を入れといてください。

特記事項

favicon

• 概要
  • いろんなブラウザ、環境で正しく表示されるように、データがたくさんあります。
    readmeに従って貼り付けてください。
  • 元データ（svg）はGit(Design系LFS)　.../designs/faviconに入ってます。

使用サービス

-　faviconの作成 external_link