前回作成した Vue アプリケーションのサイドバーに SVG のアイコンを付けてみました。
無料で使えるフリーアイコンも数多く公開されていますが、せっかくなので以前から気になっていた Adobe XD を使って自分でアイコンを作成してみました。
＊作ったもの
サイドバーに自分で作成した SVG アイコンを付けました。
＊環境
- MacOS
- vue/cli 3.8.4
＊Adobe XD とは
正式名称は「Adobe Experience Design」でプロトタイプやデザインの作成などができるツールです。無料で使うことができるスタータープランが用意されており、共有できるプロトタイプ数やクラウドストレージに制限はあるものの、機能としては有料版と同様に使えるようでした。今回は、この無料版を使ってアイコンを作成します。
下記サイトから無料版をダウンロードします。
Adobe XD を起動し、デザインのサイズを選択します。
今回は「Web」のサイズを選択して下記の図形を作成しました。
1アイコンとして扱いたいオブジェクトを複数選択した状態で右クリックをし「グループ化」をします。
1アイコンを選択した状態で、上部メニューから「ファイル > 書き出し > 選択済み」をクリックします。
下記画面が表示されるので、ファイル形式で「SVG」を選択し、ファイル名を適当に入力して「書き出し」ボタンをクリックします。
選択していた任意フォルダに SVG ファイルがダウンロードされます。
＊SVGファイルとは
「Scalable Vector Graphics」の略で画像形式の1つです。JPEG や PNG などの「ラスタ形式」と呼ばれるビットマップイメージに対し、SVG は「ベクトル形式」という XML ベースの2次元ベクターデータなので、拡大/縮小をしても画質が損なわれないといった特徴があります。また、あとから色やサイズを変更したり、CSS や JavaScript を使ってアニメーションを付けることも可能です。ファイルサイズも小さく、リソースに制限がある場合にも有効です。
ただ、複雑な配色や描画には向いていないので、写真のような画像は「ラスタ形式」を使い、ロゴなどには「ベクトル形式」を使うのが適しています。
ダウンロードした SVG ファイルをエディタで開くと、下記のようになっています。
<svg xmlns="http://www.w3.org/2000/svg" width="270" height="287" viewBox="0 0 270 287">
<g id="グループ化_10" data-name="グループ化 10" transform="translate(-1197 -331)">
<g id="グループ化_4" data-name="グループ化 4" transform="translate(792)">
<g id="長方形_1" data-name="長方形 1" transform="translate(405 331)" fill="none" stroke="#fff" stroke-width="10">
<rect width="270" height="287" stroke="none"/>
<rect x="5" y="5" width="260" height="277" fill="none"/>
</g>
<path id="パス_1" data-name="パス 1" d="M0,0,25.273-51.879l47.8,189.536,27.646-158.92,44.944,89.7L177,0" transform="translate(446.5 419.5)" fill="none" stroke="#fff" stroke-width="10"/>
</g>
</g>
</svg>
塗りつぶしの色は
fill、線の色はstrokeをそれぞれ修正することで、指定した色に変更することができます。＊SVGのコンポーネント化
サイドバーにアイコンを表示させます。今回使ったサイドバーは、下記記事で作成した Vue アプリケーションのものです。
アイコンを使う際にサイズを指定できるよう、SVGファイルをコンポーネント化します。新規に
IconGraph.vueを作成し、このファイルの<template>のなかに SVG ファイルの中身をそのまま貼り付けます。<src/components/atoms/IconGraph.vue>
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="270" height="287" viewBox="0 0 270 287">
<g id="グループ化_4" data-name="グループ化 4" transform="translate(792)">
<g id="長方形_1" data-name="長方形 1" transform="translate(405 331)" fill="none" stroke="#fff" stroke-width="10">
<rect width="270" height="287" stroke="none"/>
<rect x="5" y="5" width="260" height="277" fill="none"/>
</g>
<path id="パス_1" data-name="パス 1" d="M0,0,25.273-51.879l47.8,189.536,27.646-158.92,44.944,89.7L177,0" transform="translate(446.5 419.5)" fill="none" stroke="#fff" stroke-width="10"/>
</g>
</g>
</svg>
</template>
<script>
</script>
<style scoped lang="scss">
</style>
呼び出し側となる
Sidebar.vueから、作成したIconGraph.vueのコンポーネントを読み込みます。<src/components/organisms/Sidebar.vue>
<template>
<ul class="side-menu">
<li>
<a href="#">ダッシュボード</a>
</li>
<li>
<!---- ↓追加 ---->
<icon-graph></icon-graph>
<a href="#">推移グラフ</a>
</li>
<li>
<a href="#">結果レポート</a>
</li>
<li>
<a href="#">設定</a>
</li>
<li>
<a href="#">問い合わせ</a>
</li>
</ul>
</template>
<script>
<!---- ↓追加 ---->
import IconGraph from "../atoms/IconGraph";
export default {
components: {
IconGraph
}
};
</script>
<style scoped lang="scss">
.side-menu {
top: 74px;
position: fixed;
width: 200px;
height: 100vmax;
float: left;
background-color: #3373d3;
margin: 0;
padding: 15px 0 0 0;
& li a {
color: white;
font-weight: bold;
text-decoration: none;
}
& li {
padding: 25px 0 25px 30px;
list-style: none;
}
& li:hover {
background-color: #6ea3e9cb;
}
}
</style>
このままだとデフォルトの大きいサイズのまま表示されてしまうので、画像を縮小します。
まず
Sidebar.vueから子コンポーネントにサイズの値を渡します。追加した
<icon-graph>タグに、高さのプロパティとしてheight="20"を追加します。プロパティ名は子コンポーネントと同期が取れていれば、何の名前にしても大丈夫です。<src/components/organisms/Sidebar.vue>
<template>
<ul class="side-menu">
...
<li>
<!---- ↓heightを追加 ---->
<icon-graph height="20"></icon-graph>
<a href="#">推移グラフ</a>
</li>
...
</ul>
</template>
<script>
import IconGraph from "../atoms/IconGraph";
export default {
components: {
IconGraph
}
};
</script>
<style scoped lang="scss">
...
</style>
次に
IconGraph.vueでpropsとして親から渡されたサイズを受け取り、オブジェクトに設定します。<svg>のwidthを削除し、デフォルトの数値が設定されていたheightを:height="height"に修正し、propsで受け取った値になるように修正します。また、レイアウトを整えるために
iconクラスを追加しました。<src/components/atoms/IconGraph.vue>
<template>
<!---- ↓heightを設定 ---->
<svg xmlns="http://www.w3.org/2000/svg" :height="height" viewBox="0 0 270 287" class="icon">
<g id="グループ化_10" data-name="グループ化 10" transform="translate(-1197 -331)">
<g id="グループ化_4" data-name="グループ化 4" transform="translate(792)">
<g id="長方形_1" data-name="長方形 1" transform="translate(405 331)" fill="none" stroke="#fff" stroke-width="10">
<rect width="270" height="287" stroke="none"/>
<rect x="5" y="5" width="260" height="277" fill="none"/>
</g>
<path id="パス_1" data-name="パス 1" d="M0,0,25.273-51.879l47.8,189.536,27.646-158.92,44.944,89.7L177,0" transform="translate(446.5 419.5)" fill="none" stroke="#fff" stroke-width="10"/>
</g>
</g>
</svg>
</template>
<script>
export default {
props: ["height"]
};
</script>
<style scoped lang="scss">
//---- ↓クラスを追加 ----
.icon {
vertical-align: bottom;
padding-right: 10px;
}
</style>
全てのアイコンを同様の方法でコンポーネント化し、
Sidebar.vueから呼び出すようにすると下記になります。
＊所感
Adobe XD を初めて使ったのですが、何となくで簡単なアイコンはすぐに作成することができました。PowerPoint などで図形を作った経験があれば、詳しいドキュメントを読まなくても誰でも簡単に使うことができそうです。（ただ曲線を引くのは難しそうでした）無料で使えるフリーアイコンが数多く公開されていますが、欲しいアイコンが見つからないときは自分で作ったほうが早いかもしれないです。より高度な使い方もできそうなので、調べて理解を深めておこうと思います。
Sign up here with your email
ConversionConversion EmoticonEmoticon