Iconifyを使ってみた

# 挨拶
こんにちは。Last2014です。
サイト系などの制作にアイコンのサービスが欲しかったのですが、ある時Iconifyというものを見つけました。

# Iconifyってなに
https://iconify.design/
SVG形式でアイコンを配布しているプロジェクトで、ReactやVue.jsのコンポーネント、パッケージもあります。
もちろんSVG形式も生で配布されていてCDNもあります。
また、グループで分かれていて[分別]:[アイコン]で使えます。

# Iconifyを探る

## どんなのがあるか
![IconifyIconSets-ScreenShot](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103961/7d80a5d3-31ab-4516-a8e2-719935fdd0f3.png)
> [Iconify Icon Sets](https://icon-sets.iconify.design/)

こんな感じに結構ありますね。
僕はよく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)
https://iconify.design/docs/icon-components/react/
```powershell
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パッケージのほうを使います。
```powershell
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で使ってみます。
```tsx:src/app/page.tsx
// Iconifyのインポート
import { Icon } from "@iconify/react";

export default function Home() {
    return (
        <>

        {/*
            <Icon icon="ここに[分別]:[アイコン]が入る" />
            という書き方。
            テストではiconoir:homeを使います。
        */}
        <Icon icon="iconoir:home" />

        </>
    );
}
```
先ほどの[Icon Sets](https://icon-sets.iconify.design/)で使いたいものを選びクリックしてコピーボタンを押すとicon属性の中がコピーできます。
```powershell
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
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103961/e798b230-abbd-4746-84b9-e22386f7a8d9.png)
テストで何もCSSを入れていないのでアイコンが小さいですが無事読み込めました。
タグ1つで出来るので楽ですね。

## Vue.js(Vite)
```powershell
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は済ませたこととします
```
こちらもコンポーネントではなくパッケージを使います。
```powershell
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に直接書きます。
```vue:src/App.vue
<script setup lang="ts">
import { Icon } from "@iconify/vue";
</script>

<template>
    <!-- <Icon icon="ここに[分別]:[アイコン]が入る" /> -->
    <!-- という書き方。 -->
    <!-- テストではiconoir:homeを使います。 -->

    <Icon icon="iconoir:home" />
</template>
```
Reactとほぼ同じですね。
早速見てみましょう。
```powershell
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
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103961/1ddf119e-9739-46b5-9fb5-7c0392cfbdcc.png)
もちろん表示は同じですがVue.jsでも使えます。

## 生HTML
```html:index.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が配布されているのでそれを使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103961/1ddf119e-9739-46b5-9fb5-7c0392cfbdcc.png)
(Vue.jsと同じ表示なので同じファイル)
出来ましたね。

# Gitリポジトリ
今回のコードは僕のGiteaサーバーにアップロードしています。
参考程度にご利用ください。
- [Next.js](https://gitea.last2014.f5.si/last2014/iconify-test-nextjs)
- [Vue.js](https://gitea.last2014.f5.si/last2014/iconify-test-vuejs)
- [Vanilla](https://gitea.last2014.f5.si/last2014/iconify-test-vanilla)

# まとめ
IconifyはUIアイコンなどのSVGを配布しているプロジェクト。
IconifyはバニラHTMLやReactにNext.js、Vue.jsなどの幅広いもので使える。

# 終わりに
色々なウェブ系の開発で使えるのであなたもぜひ使ってみてはいかがでしょうか。
最後まで読んでいただきありがとうございました。