Home

antdのアイコンでsnsリンク

update: 2019-05-16

antd

follow me

自分のtwitterとGithub垢へのリンクを貼りたかったので、Iconコンポーネントを利用しようと思い、安直に下記のように書いてみました。

<a>
  <Icon type="twitter" />
</a>

こうすると、下線にリンクだよって強調するラインが入ってしまいます。aタグの属性やらcssやらを弄っても消えなくてネットで調べてもちょっとわからなかったので他の手段を考えてたらありました🤩

リンクボタン作成

ボタンコンポーネントを使用します。 "icon" プロップで前述のアイコンコンポーネントを指定できます。

<Button
    icon="twitter"  //ここでアイコン名を指定
    shape="circle"
    href={`https://twitter.com/${twitter}`}
    target="_blank"
/>

これで良い感じのリンクが作成できます。アイコンには他にもgithub、linkedin、facebook等のものもあるので、Font Awesome使わなくても事足りるかも?Tooltipで挟んであげるのも良きかと!