SVGで使いやすい、折り紙でつくった感じにデザインされたアイコン素材がかわいい！ -Origami Animals
Post on:2016年2月18日
sponsors
折り紙でつくった感じにデザインされたかわいいアイコン素材を紹介します。
SVGなので、サイズ変更やカラー変更も簡単です。
折り紙でつくった動物や魚や鳥や昆虫などがたくさん揃っています。
全部、本当に折り紙でできる感じですね。
折り紙アイコン全50種類
SVGアイコンをWebページに配置する方法
SVGアイコンをimgタグで配置
SVGアイコンは、普通の画像のようにimgタグを使って配置できます。
|
1 |
<img src="svg/noun_190468_cc.svg"> |
SVGアイコンをインラインで配置
SVGアイコンをエディタで開き、コードをコピペして配置します。
|
1 2 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="216 105 100 125" enable-background="new 216 105 100 100" xml:space="preserve"><path>pathは長いので省略</path> </svg> |
SVGアイコンのサイズやカラーを変更
SVGアイコンのサイズはスタイルシートで簡単に変更できます。
|
1 2 3 4 |
.svg-icon { width:16px; height:16px; } |
SVGアイコンのカラー変更は「color」ではなく「fill（塗り）」を使用します。
|
1 2 3 |
.svg-icon { fill: orange; } |
折り紙アイコンのダウンロード
まずは、サイトにアクセス。
せっかくなので、リスを選択してみました。
リスを選択
アイコンを選択するとダウンロードに移動し、左の「Download」ボタンをクリックします。
ダウンロードにはメールアドレス or Facebookのアカウントが必要です。
アイコンのダウンロード
アイコンのライセンスはCC BY 3.0 USで、個人でも商用でもクライアントのプロジェクトでも無料で利用できます。
sponsors
