はじめに

優秀な同期の横田くんにReactでイケてるアイコンを使う方法を教えてもらったので、紹介します。

使い方

まずパッケージをインストールします。

npm install --save react-icons-kit

あとは、このページから良さそうなアイコンを選びます。

気に入ったアイコンがあったら、クリックすると以下のようにコードが出現します。

これを利用して以下のようなコードを書きます。
create-react-appして、App.jsを上書きするのが一番簡単な試し方かもしれません。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Icon } from 'react-icons-kit'
import { quill } from 'react-icons-kit/icomoon/quill'

function App() {
  return (
    
      
    
  );
}

export default App;

すると、以下のようにアイコンを利用することができます。

おわりに

このイケてるアイコンなら、唐口くんの記事のヤコブ・ニールセンのユーザビリティ 10 原則もやりやすそうです。 このアイコンをたくさん利用して、かっこよくてUXが良いアプリを作成したいですね。