strapiの自作プラグインのアイコンを変更する方法

6537 ワード
HeadlessCMS Plugin React strapi Plugin テキストリンク

はじめに

strapiのプラグインのメニューアイコンを変更する方法です。

動作環境

Mac: MacBookPro macOS Big Sur 11.3.1
node: v12.18.3
yarn: 1.22.10
Strapi v3.6.2

自作プラグインの追加

現象を再現するために新規にプロジェクトを作成します。

$ yarn create strapi-app my-project --quickstart

適当にadminユーザーを作成してログインします。

以下のコマンドからプラグインを追加します。

cd my-project/
yarn strapi generate:plugin qiitaPlugin

adminモードでもう一度起動します。(デフォルトで８０００ポートで起動します。)

yarn develop --watch-admin

アイコンの変更

アイコンを変更したい場合は、プラグインのディレクトリのpackage.jsonのiconの部分を変更します。
プロジェクト/plugin/プラグイン名/package.json

package.json
{
  "name": "strapi-plugin-{プラグイン名}",
  "version": "0.0.0",
  "description": "This is the description of the plugin.",
  "strapi": {
    "name": "{プラグイン名}",
    "icon": "plug", <- ここを変更
    "description": "Description of *** plugin."
  },
  "dependencies": {
    "@buffetjs/core": "^3.3.6",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "styled-components": "^5.3.0"
  },
  "author": {
    "name": "A Strapi developer",
    "email": "",
    "url": ""
  },
  "maintainers": [
    {
      "name": "A Strapi developer",
      "email": "",
      "url": ""
    }
  ],
  "engines": {
    "node": ">=10.16.0 <=14.x.x",
    "npm": ">=6.0.0"
  },
  "license": "MIT"
}

デフォルトではplugとなっており、選択肢は、github上で確認することができます。

おそらくですが、FontAwesomeから流用していると思われますが、公式サイトから利用したいアイコンを探すと良いと思います.

例えば、歯車アイコンのcogsに変更すると以下のようになります。