GROWI Developers Wiki

{{pagename}} - {{sitename}}

fumiya sato

# SVGの作り方 [デザイナー担当]
- XDでパスをできるだけ少なくする
	- イラレから持ってきた場合
         - パスのアウトラインを取ってからコピペする
		- **クリッピングマスクを解除する**
		- 複合パス化
- 大きさは大きい辺を`20px以下`にし、`24px` 四方の正方形を前面にしてグループ化する
- グループ名はファイルにすると書き出した時に反映される
![image.png](/attachment/65f17f1eee65d1659c4c3cd1)
- すべて`fill="none"` にする
    - XD上ではすべてのオブジェクトに色がついていない状態にする

## XD の書き出し方法
- フォーマット: SVG
- スタイル: 内部CSS
- 画像を保存: 埋め込み
- [x] ファイルサイズを最適化(縮小)
- [ ] パスのアウトライン
![image.png](/attachment/65dd58a69f1e49494477d4a8)

## VScode で編集する
```
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}</style></defs><g transform="translate(-369 -247)"><path class="a" d="M16.849,12.639h1.624v5.438A1.922,1.922,0,0,1,16.551,20H1.923A1.923,1.923,0,0,1,0,18.077V3.45A1.923,1.923,0,0,1,1.923,1.527H7.367V3.152H1.923a.3.3,0,0,0-.3.3V18.077a.3.3,0,0,0,.3.3H16.551a.3.3,0,0,0,.3-.3ZM10.717,0V1.542h6.593L6.449,12.4,7.6,13.552,18.459,2.691V9.284H20V0Z" transform="translate(371 249)"/><rect class="a" width="24" height="24" transform="translate(369 247)"/></g></svg>
```
から
```
<rect class="a" width="24" height="24" transform="translate(369 247)"/>
```
rectで始まるタグを削除する

# woff2化
- `/workspace/growi/packages/custom-icons/svg` にsvgをいれる
- svgのファイル名がアイコン名になるため命名は正しくする
	- Material Symbols に習ってスネイクケースを採用している

 # アイコンフォントとしての使用例
 ```
<span className="growi-custom-icons">ファイル名</span>
```

# アイコン作成時のリファレンス
- Material Symbols Design Guide
    - https://m3.material.io/styles/icons/designing-icons

# Note
- スタイルを`プレゼンテーション属性`にすると表示されなくなる
- クリッピングマスク( clipPath )がある状態だとビルドに失敗する
    - https://deep-space.blue/web/2627
- Illustrator で書き出すとどの形式でも表示されなかった
- Figma はおそらくプレゼンテーション属性の書き出しなので表示されなかった

svgのwoff2化

SVGの作り方 [デザイナー担当]

XD の書き出し方法

VScode で編集する

woff2化

アイコンフォントとしての使用例

アイコン作成時のリファレンス

Note