サイトアイコン APPSWINGBY Developers Blog

heroiconsがheroicons v1.0として正式リリースされました！

Takahashi

heroiconsが正式にバージョン1.0としてリリースされました。祝！

heroiconsとは？

heroiconsとは、現代のウェブ開発において欠かすことができないウェブアイコンを、450以上のSVGアイコンをMITライセンスの元、提供してくれるWebプロジェクトです。

また、heroiconsを更に便利に利用する為に、専用コンポーネントとして素早くアクセスすることができるよう「Reactライブラリ」「Vueライブラリ」も提供しています。

heroiconsの基本体な使い方

eroiconsの基本的な使い方は、非常にシンプルです。heroiconsのウェブページ（外部リンク）にアクセスし、利用したいアイコンを選びます。恐らくこの作業が一番大変です(;^ω^)

次に、利用したいアイコンから「Copy SVG/Copy JSX」の何れかを選択します。今回は「Copy SVG」を選択します。

コピーした内容は以下の通り。

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path d="M12 14l9-5-9-5-9 5 9 5z" />
  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>

但し、これだけでは、SVGファイルが大きく表示されてしまいますので、classにアイコンのサイズやアイコンの色などの装飾を入れて、思い通りのアイコンに仕上げます。

<div class="h-10 w-10 text-red-500">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path d="M12 14l9-5-9-5-9 5 9 5z" />
    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
  </svg>
</div>

短時間で簡単にアイコンを配置することができました。

heroiconsの使用例

ReactやVueコンポーネントとしてheroiconsを使う

heroiconsは、ReactやVueコンポーネントとしてhiroiconsを利用することができます。

React
npm install @ heroicons / react
import { BeakerIcon } from '@heroicons/react/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

Vue

npm install @ heroicons / vue
<script>
import { BeakerIcon } from '@heroicons/vue/solid'

export default {
  components: { BeakerIcon }
}
</script>

コンポーネントとして利用した方が、コードが見やすくなりますね。

今日も一日頑張りましょう！

Have a great day!

モバイルバージョンを終了