9.Svg アセット

この章ではsvgのアセットの準備と、Svg Atomコンポーネントの使い方を解説します。

svgは複雑な造形のアイコンやイラストを簡単に利用できます。また、画像とは異なり、色の指定も動的に行えるので、プロジェクトにあったテーマを反映させられます。

この前作成したSvg Atomコンポーネントはそういったsvgの機能がいくつも備わっています。最初にsvgファイルを配置するassetsフォルダを作成します。

mkdir assets

事前によく使うsvgファイルをこのリポジトリのdtm/svgフォルダに用意してあります。 dtm/svgフォルダの中のsvgファイルを全て作成したassetsフォルダにコピーしましょう。

コミットする。

git add .
git commit -m "Place default svg files"

Svg のエクスポート

用意した Svg を Svg quantum コンポーネントで読み込みエクスポートしてどこからでも利用できるようにする。

atomic/atoms/Svg.tsx
import styled from '@emotion/styled'
import shouldForwardProp from '@styled-system/should-forward-prop'
import { compose, space, SpaceProps, color, ColorProps, layout, LayoutProps, width, WidthProps } from 'styled-system'
import AddImage from '@/assets/AddImage.svg'
import Camera from '@/assets/Camera.svg'
import Check from '@/assets/Check.svg'
import Close from '@/assets/Close.svg'
import Copy from '@/assets/Copy.svg'
import Doc from '@/assets/Doc.svg'
import DownCarret from '@/assets/DownCarret.svg'
import Edit from '@/assets/Edit.svg'
import Eye from '@/assets/Eye.svg'
import EyeSlash from '@/assets/EyeSlash.svg'
import Home from '@/assets/Home.svg'
import LeftCarret from '@/assets/LeftCarret.svg'
import Lock from '@/assets/Lock.svg'
import Mail from '@/assets/Mail.svg'
import Menu from '@/assets/Menu.svg'
import More from '@/assets/More.svg'
import Read from '@/assets/Read.svg'
import RightArrow from '@/assets/RightArrow.svg'
import RightCarret from '@/assets/RightCarret.svg'
import RingUser from '@/assets/RingUser.svg'
import Search from '@/assets/Search.svg'
import Star from '@/assets/Star.svg'
import Trash from '@/assets/Trash.svg'
import UpCarret from '@/assets/UpCarret.svg'

const svgs: any = {AddImage,Camera,Check,Close,Copy,Doc,DownCarret,Edit,Eye,EyeSlash,Home,LeftCarret,Lock,Mail,Menu,More,Read,RightArrow,RightCarret,RingUser,Search,Star,Trash,UpCarret,}

interface BaseSvgProps extends SpaceProps, ColorProps, LayoutProps, WidthProps {}

export const BaseSvg = styled('svg', { shouldForwardProp })<BaseSvgProps>`
  ${compose(space, color, layout, width)}
`

interface SvgProps extends BaseSvgProps {
  name: string
  stroke?: string
}

export function Svg({ name, ...props }: SvgProps) {
  // @ts-ignore
  return <BaseSvg as={svgs[name]} {...props} />
}

利用するときはこのような形にします。

import { Svg } from '../atomic/'

...省略...

<Svg name="Close" width={120} mx="auto" stroke="blue" />

git add .
git commit -m "Export Svg assets"

Svg ファイルを作成する時の手順

svgファイルの追加方法を紹介します。 svgファイルはフォーマットを揃えないと、web上でうまく表示できません。特にwidthやheight、ViewBoxは厳密に記述しないと、レスポンシブに対応で来ません。

Svg ファイルはmingcute でダウンロードして使うことを想定します。

https://www.mingcute.com/

ダウンロード時の大きさは、なんでも良いですが、幅が64pxにものをダウンロードします。 Sketchを開き、新しくファイルを作成します。アートボードを作成し、ダウンロードしたsvgファイルを配置します。

set svg

アートボードの大きさを配置したsvgぴったりに合わせます。アートボードの合わせ方ですが、アイコンの横幅のサイズが縦よりも大きい場合はアートボードの幅が64pxになるようにしましょう。逆に、アイコンの縦幅のサイズが横幅よりも大きい場合は、アートボードの高さが64pxになるようにします。

artboard size

アートボードを選択した状態で右のメニューの「EXPORT」かsvgをエクスポートします。

export-svg

エクスポートされたファイルを開くとこのように、様々なプロパティが含まれています。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Artboard</title>
    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icons8-close" fill="#000000" fill-rule="nonzero">
            <polygon id="Path" points="3.7980316 2.38555997e-15 2.38555997e-15 3.7980316 1.90950962 5.68655896 28.2019684 32 2.38555997e-15 60.2019684 3.7980316 64 32 35.7980316 58.2924588 62.111478 60.2019684 64 64 60.2019684 62.111478 58.2924588 35.7980316 32 64 3.7980316 60.2019684 2.38555997e-15 32 28.2019684 5.68655896 1.90950962"></polygon>
        </g>
    </g>
</svg>

svgファイルの余分な要素`<?xml ...>と<title>と<g ...>タグは削除します。さらに、そこから<svg ...>タグのwidthとheightを削除します。最終的にこのように整形します。

<svg viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon id="Path" points="3.7980316 2.38555997e-15 2.38555997e-15 3.7980316 1.90950962 5.68655896 28.2019684 32 2.38555997e-15 60.2019684 3.7980316 64 32 35.7980316 58.2924588 62.111478 60.2019684 64 64 60.2019684 62.111478 58.2924588 35.7980316 32 64 3.7980316 60.2019684 2.38555997e-15 32 28.2019684 5.68655896 1.90950962"></polygon>
</svg>

利用可能な記載のみになりました。作成したsvgファイルをassetsフォルダに配置してSvg Atomコンポーネントで呼び出しエクスポートして利用してみてください。

9.Svg アセット

Svg のエクスポート​

Svg ファイルを作成する時の手順​

Svg のエクスポート

Svg ファイルを作成する時の手順