Webデスクトップの制作 #02 アイコン表示

デスクトップのベースができたら、次はアイコンを表示すると、もはや見た目はデスクトップそのものになります。 何も操作できないけど、モチベーションを爆上げするために、自分の好きなアイコンを設置してみることにします。

アイコンの取得

Webサービスでいろいろなデスクトップ用のアイコンが無料でダウンロードできます。

icons8

https://icons8.jp/icons/set/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97 Figmaプラグインにも対応している、アイコンダウンロードサイトです。 SVG形式は有料会員になるとダウンロードできるようです。（PNG形式は無料でDLできます)

FLAT ICON DESIGN

http://flat-icon-design.com/ カワイイ感じのフラットデザインのアイコンがあります。 ここのサイトではSVG形式でDLできるので、他のツールとの相性も良さげです。

Squid inc

https://thesquid.ink/flat-icons/ カラーのフラットアイコンがダウンロードできます。 トップページで大量に表示されているので、選択しやすいサイトですね。 あ、でも基本有料なので、無料でお探しの方はご遠慮ください。（一部無料もあるようです）

icon-icons

https://icon-icons.com/ja/ パッケージで選択できるので、テーマ統一のアイコンが見つけやすいサイトです。 基本無料でダウンロードできるので、安心して使えるサイトですね。 もちろん、SVGダウンロードもできます。

SVG REPO

https://www.svgrepo.com/ SVGのみでアイコンを探したい場合は、やっぱりココ。

今回DLしたアイコン郡

ということで、上記のWebサイトを色々とネットサーフして、以下のアイコンをダウンロードしてみました。 DLしたアイコンセットは以下のリンクで行けます。 https://www.svgrepo.com/collection/isometric-3d-interface-icons/

デモ

画面に配置

適当なアイコンを画面に配置してみました。 ついでに、アイコンの名前も適当につけて、デスクトップっぽく見えるようになってきました。

あとがき

でも、アイコンをドラッグしても動きません。 クリックしてもフォルダは開きません。 何故なら、それをやるには、Javascriptで処理をしなければいけないので、今回はまだ画像タグを設置しただけで、CSSとHTMLしか書いていないからです。 当たり前ですね。 次回よりJavascriptモードに突入して行きたいと思います。