@tabler/icons を Web フォントとして使う

フリーアイコンです。各フレームワーク向けのライブラリも提供されています。
Web フォントとして使用するときにドキュメントに誤りや不足があったのでこの記事に情報を載せておきます。
コード例は Svelte で記載しますが他のフレームワークでも大体同じだと思われます。

https://tabler.io/icons

ドキュメント

https://tabler.io/docs/icons/webfont

インストール

NPM

npm install @tabler/icons-webfont

CDN

app.html か *.svelte の <svelte:head> あたりに追加してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.8.0/dist/tabler-icons.min.css">

コード

CDN の場合は import は不要です。

ExternalLink.svelte

<script lang="ts">
	import '@tabler/icons-webfont/dist/tabler-icons.min.css';
	export let url: string;
</script>

<a href={url} target="_blank" rel="noopener noreferrer">{url}</a>

<style>
  a::after {
    font-family: 'tabler-icons';
    content: '\ea99';
  }
</style>