挨拶
こんにちは。Last2014です。
サイト系などの制作にアイコンのサービスが欲しかったのですが、ある時Iconifyというものを見つけました。
Iconifyってなに
https://iconify.design/
SVG形式でアイコンを配布しているプロジェクトで、ReactやVue.jsのコンポーネント、パッケージもあります。
もちろんSVG形式も生で配布されていてCDNもあります。
また、グループで分かれていて[分別]:[アイコン]で使えます。
Iconifyを探る
どんなのがあるか
こんな感じに結構ありますね。
僕はよくIconoirを使います。
Iconoirは人物のトップページに使われたりするようなUI向けアイコンがあります。
目的のアイコンがなかったら分別の一覧ページにある右上のAllからすべてのアイコンを検索したりトップページにある右上の検索ボックスで入れたりします。
サイトのコードは公開されているなか見ていませんがタグがあるのかアイコン名に直接なくても関連する単語で検索できます。これは使えますね。
代用できるサービスとの違い
Simple Icons
Simple Iconsはブランドアイコンだけの中、IconifyはUIアイコンからスキルアイコン、国旗などふと使いたいものが思いついたらほぼ対応しています。
Simple Iconsはブランドアイコンが単色と生のSVGデータで分かれているのでフルカラー以外のブランドアイコンを使う場合にはSimple Iconsのほうがいいかもしれません。
Bootstrap Icons
Bootstrap IconsはSVGでUIアイコンやアクセシビリティアイコンなどが配布されているサービスですが白と黒だけかつUIアイコンなどしかありません。また、種類もIconifyよりも少ないです。少量でUIアイコンだけを使う方ならBootstrap Iconsで十分かもしれません。
使ってみる
Next.js(React)
PS C:\dev\iconifyQiita> create-next-app
√ What is your project named? ... nextjs
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in C:\dev\iconifyQiita\nextjs.
Using npm.
Initializing project with template: app
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
added 34 packages, and audited 35 packages in 24s
5 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created nextjs at C:\dev\iconifyQiita\nextjs
試しにこの構成でNext.jsプロジェクトを作りました。
コンポーネントをコピー&ペーストしてexportする方法もありますが今回はnpmパッケージのほうを使います。
PS C:\dev\iconifyQiita\nextjs> npm install -D @iconify/react
added 2 packages, and audited 37 packages in 6s
6 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Iconifyをプロジェクトにインストールします。
出来たらpage.tsxで使ってみます。
// Iconifyのインポート
import { Icon } from "@iconify/react";
export default function Home() {
return (
<>
{/*
<Icon icon="ここに[分別]:[アイコン]が入る" />
という書き方。
テストではiconoir:homeを使います。
*/}
<Icon icon="iconoir:home" />
</>
);
}
先ほどのIcon Setsで使いたいものを選びクリックしてコピーボタンを押すとicon属性の中がコピーできます。
PS C:\dev\iconifyQiita\nextjs> npm run dev
> nextjs@0.1.0 dev
> next dev --turbopack
▲ Next.js 15.3.3 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.3.3:3000
✓ Starting...
✓ Ready in 2.1s
テストで何もCSSを入れていないのでアイコンが小さいですが無事読み込めました。
タグ1つで出来るので楽ですね。
Vue.js(Vite)
PS C:\dev\iconifyQiita> npm create vite@latest
Need to install the following packages:
create-vite@6.5.0
Ok to proceed? (y)
> npx
> create-vite
│
◇ Project name:
│ vuejs
│
◇ Select a framework:
│ Vue
│
◇ Select a variant:
│ TypeScript
│
◇ Scaffolding project in C:\dev\iconifyQiita\vuejs...
│
└ Done. Now run:
cd vuejs
npm install
npm run dev
# npm installは済ませたこととします
こちらもコンポーネントではなくパッケージを使います。
PS C:\dev\iconifyQiita\vuejs> npm install -D @iconify/vue
added 2 packages, and audited 53 packages in 3s
8 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
短いし1つのプロジェクトなのでApp.vueに直接書きます。
<script setup lang="ts">
import { Icon } from "@iconify/vue";
</script>
<template>
<!-- <Icon icon="ここに[分別]:[アイコン]が入る" /> -->
<!-- という書き方。 -->
<!-- テストではiconoir:homeを使います。 -->
<Icon icon="iconoir:home" />
</template>
Reactとほぼ同じですね。
早速見てみましょう。
PS C:\dev\iconifyQiita\vuejs> npm run dev
> vuejs@0.0.0 dev
> vite
VITE v6.3.5 ready in 451 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
もちろん表示は同じですがVue.jsでも使えます。
生HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iconify Vanilla Test</title>
<!-- Iconifyインポート -->
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
<script>
import "iconify-icon";
</script>
</head>
<body>
<!-- <iconify-icon icon="ここに[分別]:[アイコン]が入る" /> -->
<!-- という書き方。 -->
<!-- テストではiconoir:homeを使います。 -->
<iconify-icon icon="iconoir:home" />
</body>
</html>
クライアントに対応しているパッケージのJSが配布されているのでそれを使います。
(Vue.jsと同じ表示なので同じファイル)
出来ましたね。
Gitリポジトリ
今回のコードは僕のGiteaサーバーにアップロードしています。
参考程度にご利用ください。
まとめ
IconifyはUIアイコンなどのSVGを配布しているプロジェクト。
IconifyはバニラHTMLやReactにNext.js、Vue.jsなどの幅広いもので使える。
終わりに
色々なウェブ系の開発で使えるのであなたもぜひ使ってみてはいかがでしょうか。
最後まで読んでいただきありがとうございました。