Google ChromeでSVGファイルが表示されない場合の対策

Photoshopで書き出したSVGファイルがChromeで表示されない場合の対策方法を紹介します。

SVGファイルをテキストエディタで開き、img/pngとなっている部分をimage/pngに修正します。

PrismでReact(jsx)のコードの HTMLタグが消える際の対策方法

シンタックスハイライターのPrismを使っているのですが、Reactのコードを掲載するときにコンポーネント内のHTMLタグが残っていると消えてしまいます。

対策方法

&lt;と&gt;でタグの<と>を置換すると正しく表示されます。

Prismでjsxを選択したときにHTMLタグが表示されない

サンプルコード

CodePenでご覧ください。

Reactでfont awesomeを使う

Font AwesomeというアイコンのフォントセットをReactで使うための方法を紹介します。
react-fontawesomeというnpmパッケージを使用します。

インストール方法

yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

使い方

まずApp.jsの中で必要なライブラリをimportします。
free-brands-svg-iconsは有名な会社のアイコンのセットで”apple”や “microsoft”や “google”などと表示することでそのアイコンを表示できます。
free-solid-svg-iconsにはUIに使うアイコン一式が入っています。

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons

library.add(fab, faCheckSquare, faCoffee)//あらかじめ使用するアイコンを追加しておく

そして、実際にアイコンを表示するコンポーネントでは以下のようにアイコンを呼び出します。

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
const Icons = () => (
<div>
  チェック:<FontAwesomeIcon icon="check-square" />
  コーヒー:<FontAwesomeIcon icon="coffee" />
  Apple:<FontAwesomeIcon icon={['fab', 'apple']} />
  Microsoft:<FontAwesomeIcon icon={['fab', 'microsoft']} />
  Google:<FontAwesomeIcon icon={['fab', 'google']} />
</div>
)
export default Icons

実行すると以下のようになります。(上記ソースのままだと横並びになります。)

font awesome
実行結果(スタイリング済)

動作プログラムサンプル

CodeSandBoxを使用した動作サンプルはこちらです。

gatsby-plugin-page-transitionsはv2対応してないのでビルドが通らない

gatsbyのページ遷移アニメーションをつけるプラグインgatsby-plugin-page-transitionsは廃止されたAPIを使用しているのでgatsby buildコマンドでのビルドが通りません。(gatsby developは通ります。)

Netlifyにもデプロイできないので使うのをやめました。ちなみにエラーメッセージは以下の通りです。

error 
Your plugins must export known APIs from their gatsby-browser.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

See https://www.gatsbyjs.org/docs/browser-apis/ for the list of Gatsby Browser APIs

- The plugin "gatsby-plugin-page-transitions@1.0.7" is exporting a variable named "replaceHistory" which isn't an API.

GatsbyでSassを使う

GatsbySassを使う方法を調べてみました。

インストール

npm install --save node-sass gatsby-plugin-sass
続きを読む

gatsby-plugin-sitemapを使う

Gatsby.jsでサイトマップを作成するプラグインgatsby-plugin-sitemapの設定方法です。

続きを読む

WordPressでシンタックスハイライトするのにPrismを使う

元々プラグインでシンタックスハイライトさせていたのですが、動作が重かったり表示が一昔前っぽくなってしまうのでモダンな表示になるものを探していました。今回はPrismを使って記事中のコードのシンタックスハイライトをさせてみることにしました。Prismを使ったプラグインもあるようですが今回はプラグインを使わずテーマに組み込みました。

Prismで対応している言語のリストはこちらです。大抵の言語はカバーできています。 続きを読む

Gatsbyでfaviconを変更する方法

Gatsbyでページを作成するとデフォルトのfaviconが割り当てられているので、これを自作のfaviconに変更しました。

faviconはブラウザのタブなどに表示されるアイコンです。

続きを読む

gatsby-imageで画像を表示する方法

Gatsbyを使って画像を表示する方法です。dev.toに参考になる記事があったのでこちらをもとに設定しました。

続きを読む

Gatsby + netlifyでフォームを送信する方法

netlify上でGatsbyを使ってフォームを作る方法を調べたのでメモしておきます。
続きを読む