SVGアイコンのライブライの選び方のおすすめ

現在メジャーでは二つの書き方がある

1. 表示するよと宣言するIconと具体的なアイコン内容PencilSquare InformationCircleをそれぞれimportして、ペアで使うパターン

<script>
	import {
		Icon,
		PencilSquare,
		InformationCircle
	} from 'svelte-hero-icons';
</script>

<Icon src={PencilSquare}  />
<Icon src={InformationCircle} />

2. 表示したいアイコンだけをimportして使うパターン

<script>
	import {
		PencilSquare,
		InformationCircle
	} from 'svelte-hero-icons-example';
</script>

<PencilSquare  />
<InformationCircle />

1のほうはいちいちIconを導入しないといけないのがめんどくさいように見えるけど、個人的には圧倒的に1の書き方のほうがいいと考えている。なぜなら、メンテナンスしやすいからだ。例えば表示するアイコンを変えたいときにVSCodeで<Icon src=を検索すれば、コードのどこにどんなアイコンが使われてるかはすぐわかる。逆にアイコン名だけでやる場合はどんなアイコンを導入したかを確認してから検索しないといけない、圧倒的に面倒だ。