Feather Iconsでカスタムアイコンを作る

https://github.com/feathericons/feather

Feather Iconsはカスタムアイコンを追加することができないライブラリーです

まずはインストールしてインポートしてみます

import feather from "feather-icons";

console.log(feather);

Consoleの結果は以下です

アイコン追加のメソッドはないですね

ちなみに全てのFeather IconsはIconクラスです
例えば「x」のアイコンをプリントアウトしてみると

console.log(feather.icons.x);

結果はこうです、先頭にIconというテキストがついてきます
それがIconというClassです（あるいはFunction Constructorです）

そして力んでアイコン追加してみます
手順は

1. Iconクラスを作成
2. feather.iconsにその作成したIconを追加

まずはIcon作成します
Classというのは、object.constructor()でアクセスすることができます

例えばこのコード、const mayはclass People {}とは同じスコープに存在していますので
new People()を使って簡単にPeopleを作ることができます

class People {}
const may = new People();

スコープが分離した場合、例えばこのようで

function createMay() {
  class People {}
  const may = new People();
  return may;
}

const may = createMay();
console.log(may); // People {constructor: Object}

この状況で、もしcreateMay()を弄らず、もう一人のPeopleを作りたかったらどうします？
それはobject.constructor()を借りて、mayのクラスを複製します

const may = createMay();
console.log(may); // People {constructor: Object}

const mary = new may.constructor();
console.log(mary); // People {constructor: Object}

これがクラスの複製です
同じように、まずは一つのアイコンから複製しよう

const newIcon = new feather.icons.x.constructor();
console.log(newIcon);

結果はこうです
複製はしましたが、全てがundefinedだったようです

そこでconstructorの関数構成をもっと詳しく見に行きましょう

console.log(newIcon.constructor);

注目してほしいのはIcon(name, content)の二つの引数です
その二つの引数を記入します

const content = `
	<path d="M1.5 7C5 15 17 18 22.5 7" />
	<path d="M4 11.5L1.5 14.5" />
	<path d="M8 13.5L6 17.5" />
	<path d="M12 14.5V18.6" />
	<path d="M16 14L18 17.5" />
	<path d="M20 11.5L22.5 14" />
`.replace(/\n\t/g, "");
const newIcon = new feather.icons.x.constructor("custom-eye", content);
console.log(newIcon);

これでマトモに作成しました

次はfeather.iconsに追加します

feather.icons[newIcon.name] = newIcon;

これで完了しました

さらにループ化にしてみたら

const customIcons = [
	{
		name: "mb-eye-off",
		content: `
		<path d="M1.5 7C5 15 17 18 22.5 7" />
		<path d="M4 11.5L1.5 14.5" />
		<path d="M8 13.5L6 17.5" />
		<path d="M12 14.5V18.6" />
		<path d="M16 14L18 17.5" />
		<path d="M20 11.5L22.5 14" />
		`
	}
]

function addCustomFeatherIcon(name, content) {
	content = content.replace(/\n\t/g, '');
	const newIcon = new feather.icons.x.constructor("mb-eye-off", content);
	feather.icons[newIcon.name] = newIcon;
}

for (const icon of customIcons) {
	addCustomFeatherIcon(icon.name, icon.content)
}

そうすることによってcustomIconsを追加するだけでアイコンを増やすことができます