プラグインの動作

Remark Directiveとして、以下のように記述します。

:icon[fa6-brands:aws]{size=24 color=#fff}

上記の場合、AWSのアイコンが表示されます。サイズ、色はオプションです。

アイコンの検索

アイコンはIconify - home of open source iconsにて検索して、その名前を :iconify[ICONNAME]{size=24 color=#000} の ICONNAME に指定します。

プラグインを追加する

利用する際には、GROWIの管理画面の プラグイン にて追加してください。URLは https://github.com/goofmint/growi-plugin-iconify です。

コードについて

コードはgoofmint/growi-plugin-iconify: GROWI plugin for using iconifyにて公開しています。ライセンスはMIT Licenseになります。

最初に :icon というRemark Directiveを処理します。この記述があれば、 a タグに変換します。他、 {} 内で指定した情報は title に設定します。また、 iconify = true を追加して、他の a タグとの区別をつけています。

vist メソッドで、RemarkのAST textDirective を処理します。2つ目の引数を指定すると、そのディレクティブの場合のみ呼び出されるので便利です。

export const remarkPlugin: Plugin = () => {
  return (tree: Node) => {
    visit(tree, 'textDirective', (node: Node) => {
      const n = node as unknown as GrowiNode;
      if (n.name !== 'icon') return;
      const data = n.data || (n.data = {});
      // Render your component
      const iconName = n.children.map(c => c.value || c.name).join(':');
      const { size, color } = n.attributes;
      data.hName = 'a'; // Tag name
      data.hChildren = [
        {
          type: 'text',
          value: iconName,
        },
      ];
      // Set properties
      data.hProperties = {
        title: JSON.stringify({ size, color, iconify: true }),
      };
    });
  };
};

a タグを表示する際には、 iconify の指定があれば、<iconify-icon /> で表示します。それ以外の場合は、元々のタグを表示します。

export const Iconify = (Tag: React.FunctionComponent<any>): React.FunctionComponent<any> => {
  return ({ children, ...props }) => {
    try {
      const { size, color, iconify } = JSON.parse(props.title);
      if (iconify) {
        return (
          <iconify-icon icon={children} style={{
            color: color || '#000',
            fontSize: `${size || 24}px`,
            verticalAlign: 'bottom',
          }} />
        );
      }
    }
    catch (err) {
      // console.error(err);
    }
    // Return the original component if an error occurs
    return (
      <Tag {...props}>{children}</Tag>
    );
  };
};

GROWIコミュニティについて

プラグインの使い方や要望などがあれば、ぜひGROWIコミュニティにお寄せください。実現できそうなものがあれば、なるべく対応します。他にもヘルプチャンネルなどもありますので、ぜひ参加してください！

GROWI Slackへの参加はこちらから

まとめ

GROWIプラグインを使うと、表示を自由に拡張できます。足りない機能があれば、どんどん追加できます。ぜひ、自分のWikiをカスタマイズしましょう。

OSS開発wikiツールのGROWI | 快適な情報共有を、全ての人へ