SveletkitのSVGのアイコン:iSvelifyとICを使用して

🖼 ICとは何か

Sveletkit SVGのアイコンをこのポストでは、我々はどのように簡単にそれはあなたのsvelteアプリに100 , 00 SVGのアイコンを選択することができます参照してください.ただ一つの依存性を追加することで、それを実行します.Iconify統一されたアイコンのフレームワークです.過去にあなたのライブラリにフォント素晴らしいアイコンを得るために1つのパッケージを必要とし、別の社会的な共有アプリケーションのアイコンを取得する別の.Iconifyは、必要なだけのアイコンをインポートすると、両方のライブラリにアクセスすることができます.
その多くのライブラリとアイコンを使用すると、から選択するには、疑いなく、あなたのアプリケーションに必要なアイコンを見つけるためのカタログや検索ツールが必要になります.それはICの担当者が来る場所です.アプリは、VUEコアチームからアンソニーFuによって作成された、あなたが正確に何が必要見つけるのを助ける、Iconifyのインターフェイスを提供します.あなただけのアイコンを検索し、一度あなたが好きなものを持って、それはあなたのSveletKitアプリにそのアイコンを取得するために使用できるショートコードを提供します.我々はどのようにこのポストでは、デモSvelteアプリにフッターのアイコンを追加する方法を参照してください.

🧱 我々の建物

私たちはアクセシビリティを使用してSveletKitアプリをiconifyを使用してSVGのアイコンを追加する方法を参照してください.既にSveletKitアプリを持っている場合は、新しい開発ブランチを作成することができますし、それに沿って従ってアイコンを追加します.つまり、私たちがビルドした完全なコードをRodney Lab GitHub repo , それは新しいアプリの出発点として使用します.
iconifyでSVGアイコンを追加するのはかなり簡単ですので、すぐに行こう!さらにフォローアップポストで、我々は訪問者がタップすることができる共有ボタンをつくって、ウェブサイトAPIを使っているTwitterと他のネットワークであなたのサイトからページを共有するためにクリックするIconifyを使います.

⚙️ SveletKitセットアップセットアップ

インストールする必要のあるパッケージは@iconify/svelte . プロジェクトに追加しましょう.

pnpm add -D @iconify/svelte

🧩 Svelteアイコンコンポーネント

次に、svelteアイコンコンポーネントを作成します.head over to icônes したいアイコンを見つける.を選択します.どのようにアイコンを使用するには?ポップアップ表示されます.

ここで我々はtwitter からのアイコンsimple-icons コレクション.あなた自身の選択した組み合わせのメモを確認します.SvelteボタンをクリックするだけでSVGパスを取得できます.しかし、我々は少し柔軟性を得るためにIconifyパッケージを使用します.あなたがTwitterのアイコンを作成していると仮定src/lib/components/TwitterIcon.svelte あなたのプロジェクト(別のアイコンを追加している場合は名前を変更).次のテンプレートコードを追加します

<script>
  import Icon, { addCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';

  export let label = '<UPDATE>';
  export let colour = 'inherit';
  export let ariaHidden = false;
  export let width = 48;

  /* some libraries add an id which can result in duplicate ids and that can impact accessibility so
  you can override with a random id if you face this issue */
  const id = Date.now().toString(16) + ((Math.random() * 0x1000000) | 0).toString(16);

  addCollection( /* REPLACE WITH ICON DATA */ );

  // https://api.iconify.design/<COLLECTION>.json?icons=<ICON>
</script>

<Icon icon="<COLLECTION>:<ICON>" {ariaHidden} aria-label={label} color={colour} {width} {id} />

</script>

イン・ライン2 我々は、インポートIcon コンポーネントaddCollection オフラインサポートのための機能.我々は一瞬で実際のアイコンデータのワンオフダウンロードを行います.代わりに、オフラインサポートについて悩まされていない場合は、スキップすることができますaddCollection それを必要とするとき、呼び出して、iconifyにアイコンをダウンロードしてください.この場合、置換線2 :

<script> /* ONLY IF YOU DO NOT WANT OFFLINE SUPPORT */
  import Icon from '@iconify/svelte';

整列する11 , 完全なコードのうち、ランダムを生成するid . いくつかのアイコンコレクションが追加されますので、これは有用ですid を生成する.ページ上に同じアイコンを1回以上使用すると、このフラグはautomated accessibility testing .

オフライン開発のためのダウンロードアイコン

おそらくオフラインのサポートのためのアイコンデータを取得する最も簡単な方法は、端末を使用しています.ちょうど行にテンプレートを使用してURLを作成する15 使用curl 端末からダウンロードします.のためにsimple-icons twitter 完全なコマンドのアイコンは" s ):

curl -L "https://api.iconify.design/simple-icons.json?icons=twitter"

これはJSONオブジェクトを返します13 . また、我々の行に選択したアイコンの名前を追加する必要があります18 行のアクセス可能な記述ラベルと同様に4 . ここに私たちのTwitterのアイコンの完全なコードです:

<script>
  import Icon, { addCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';

  export let label = 'Twitter icon';
  export let colour = 'inherit';
  export let ariaHidden = false;
  export let width = 48;

  /* some libraries add an id which can result in duplicate ids and that can impact accessibility so
  you can override with a random id if you face this issue */
  const id = Date.now().toString(16) + ((Math.random() * 0x1000000) | 0).toString(16);

  addCollection({
    prefix: 'simple-icons',
    icons: {
      twitter: {
        body: '<path fill="currentColor" d="M23.953 4.57a10 10 0 0 1-2.825.775a4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827a4.996 4.996 0 0 1-2.212.085a4.936 4.936 0 0 0 4.604 3.417a9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985c0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z"/>',
      },
    },
    width: 24,
    height: 24,
  });

  // https://api.iconify.design/simple-icons.json?icons=twitter
</script>

<Icon icon="simple-icons:twitter" {ariaHidden} aria-label={label} color={colour} {width} {id} />

🏡 SVGアイコンコンポーネントの使用

最後に、SVGアイコンコンポーネントをフッターアイコンとして追加できます.

<script>
  import TwitterIcon from '$lib/components/TwitterIcon.svelte';
</script>

<footer class="footer-container">
  <nav class="links">
    <a aria-label="Open my Twitter profile" href="https://twitter.com"
      ><span class="icon"><TwitterIcon /></span></a
    >
  </nav>
</footer>

<style>
  .footer-container a {
    color: var(--colour-alt);
  }
  .footer-container a:focus,
  .footer-container a:hover {
    color: var(--colour-dark);
  }
  .icon {
    margin: var(--spacing-4);
  }
</style>

ファイルはここで切り詰められます.see it in its full glory on the GitHub repo . それだ!

🙌🏽 Sveletkit SVGのアイコン：ラッピング

このポストでは、私たちはあなたのsvelteアプリをiconifyを使用して再利用可能なSVGのアイコンのコンポーネントを追加するにはかなり簡単な方法を見てきました.特に見たことがあります.

どのようにアイコンのライブラリからアイコンを見つけるには、どのように.

どのようにあなたのsvelteアプリでオフラインサポートのアイコンをアイコンをダウンロードしてください.

SVGアイコンのアクセシビリティを改善できるいくつかの方法

アプリのための完全なコードが利用可能ですrepo on Rodney Lab GitHub .
プロジェクトで使用する方法を教えてください.また、あなたのsvelteアプリに社会的な共有ボタンを追加するIconifyでWeb共有APIを使用してフォローアップポストをご覧ください.

🙏🏽 Sveletkit SVGアイコン：フィードバック

そのポストは役に立ちましたか.代わりに別のトピックの記事を見たいですか?新しい投稿のアイデアと連絡を取る.また、もしあなたが私のライティングスタイルが気に入ったら、あなたの会社のサイトにいくつかの記事を書くことができます.記事を読む上で、さらに以下のタッチを取得する方法を見つける.あなたがこの1つに類似したポストを支持したいならば、数ドル、ユーロまたはポンドを準備することができますconsider supporting me through Buy me a Coffee .
最後に、あなたのソーシャルメディアアカウントの投稿を共有すること自由に感じているすべてのあなたの信者は、それが役に立つでしょう.だけでなく、以下のコメントを残して、あなたはTwitterやaskRodney on Telegram . また、further ways to get in touch with Rodney Lab . 定期的に投稿Astro だけでなくSvelteKit . Also subscribe to the newsletter to keep up-to-date 我々の最新プロジェクトで.