はじめに
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モードでもう一度起動します。(デフォルトで8000ポートで起動します。)
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
に変更すると以下のようになります。