ブログの見た目を整える

まあ俺デザイナーじゃないしイケてるかどうかは置いといてさ

成果物はもちろんこのブログです

お前のプロフィールページ情報量少なくね？

エンジニアのポートフォリオみたいに SNS とか GitHub とかのアイコンとか貼りたいけど svg とか選ぶのクソめんどいのでreact-icons使うね。

アイコン足すだけだしプロフィールページのコンポーネントに殴り書いてもいいんだけどせっかく心の余裕があるしアイコンリンクを並べるだけのコンポーネントを作る。

全然関係ないけどセブンで売ってるみかん氷、うまいよね。

いざ、アイコンをインポート

だけど Twitter は貼りたくないし GitHub くらいしかマジでないわ…

てか react-icons 楽すぎる

// ProfileIcons.tsx

import React from 'react'
import { FaGithub } from 'react-icons/fa'

const ProfileIcons: React.FCX = (props) => {
  return (
    <div>
      <a href="https://github.com/Kaisa55275" target="_blank" rel="noreferrer">
        <FaGithub />
      </a>
    </div>
  )
}

export default ProfileIcons

このコンポーネントをプロフィールページで呼んであげると無事 GitHub 現れたわね！

まだスタイル書いてないから訳わかんないとこに出ちゃうあるある〜〜

スタイルをどう書くか

React のスタイルの書き方は諸説あるが自分は BEM に馴染んでいるので CSS in JS で書いている。

なんか CSS in JS 嫌いな人多いよね。なんでだろう？？

とりあえずクラス名を追加する。後で自動で props に付与されるものを使う。

// ProfileIcons.tsx

import React from 'react'
import { FaGithub } from 'react-icons/fa'

const ProfileIcons: React.FCX = (props) => {
  return (
    <div className={props.className}>
      <a
        className={`${props.className}__icon`}
        href="https://github.com/Kaisa55275"
        target="_blank"
        rel="noreferrer"
      >
        <FaGithub />
      </a>
    </div>
  )
}

export default ProfileIcons

コンポーネントにつけている FCX 型については以下を参照

React.FC 型を拡張する - Qiita

雰囲気で使わない @types/react の続編です。自分もそうなのですが、多くのプロジェクトで styled-components が利用されているかと思います。この時、お決まりの様に Props型に className?: st...

qiita.com

なんか通常？の styled-components の書き方だと styled.div なんかを定義して使うけど default export 時に styled-components の引数に指定すると props.className をそのままスタイル付けできる。

もちろんスコープもバッチリ切れる。

子要素の命名は BEM 使うとすんなりですな！！！ははは！！！

// ProfileIcons.tsx

import React from 'react'
import { FaGithub } from 'react-icons/fa'
import styled from 'styled-components'

const ProfileIcons: React.FCX = (props) => {
  return (
    <div className={props.className}>
      <a
        className={`${props.className}__icon`}
        href="https://github.com/Kaisa55275"
        target="_blank"
        rel="noreferrer"
      >
        <FaGithub />
      </a>
    </div>
  )
}

export default styled(ProfileIcons)`
  display: flex;
  justify-content: center;
  align-items: center;

  &__icon {
    transition: 0.2s;
    margin: 0 12px;

    &:hover {
      transform: scale(1.2);
      opacity: inherit;
    }

    > svg {
      width: 20px;
      height: 20px;
    }
  }
`

てかシンタックスハイライト効かないとみづらいね…VSCode だと実際はいい感じよ！

完成とは

はい出来た〜〜〜ホバーすると大きくなるよ！

いや、アイコン一個足しただけで全然見た目整えてなくね？？？？？？？