<div class="my-6 flex justify-between px-8">
	<Icon name="cake" theme path="symbols/Heroicons.svg" />
	<Icon name="riding-line" path="symbols/Remix.svg" />
	<Icon name="spy-line" theme path="symbols/Remix.svg" />
	<Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="symbols/Remix.svg" />
	<Icon name="cup" theme path="symbols/IconPark.svg" />
</div>
<div class="px-4 text-xs">
	{#if lang === 'zh_CN'}
		<p>
			以上图标通过 <a class="underline" href="https://www.npmjs.com/package/rollup-plugin-stdf-icon" target="_blank">
				rollup-plugin-stdf-icon
			</a> 使用 SVG Sprites 方式：
		</p>
		<p class="mt-2">
			第一个来自
			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>，最后一个来自
			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>，其余来自
			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a>。
		</p>
	{:else}
		<p>
			The above icons use <a class="underline" href="https://www.npmjs.com/package/rollup-plugin-stdf-icon" target="_blank">
				rollup-plugin-stdf-icon
			</a> way:
		</p>
		<p class="mt-2">
			The first one comes from
			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>，the last one comes from
			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>，the rest come from
			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a>.
		</p>
	{/if}
</div>