アイコンコンポーネント

6656 ワード

iconmonstr svelte javascript svg テキストリンク

Webフレームワークのアイコンを使用する場合、定義済みコンポーネントはfontawesomeのように使用されます.しかし、いくつかのアイコンを持っているか、カスタムアイコンを使用する場合は、SVGを使用して独自のコンポーネントを作成する方法を示します.
SVGのために、私は非常に涼しいアイコンがあるhttps://iconmonstr.com/から得ます.

<script lang="ts">
/* eslint-disable no-unused-vars */

enum IconTypes {
  plus = "M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z",
  arrow = "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z",
}
type IconTypesString = keyof typeof IconTypes;

type PosTypes = "left" | "down" | "up" | undefined;

export let icon: IconTypesString;

export let height = "24";
export let width = "24";

export let className: string = undefined;
export let position: PosTypes = undefined;

const totalClass = [className, position].join(" ");
</script>

<svg xmlns="http://www.w3.org/2000/svg"
  class={totalClass ? totalClass : undefined}
  width="{width}"
  height="{height}"
  viewBox="0 0 24 24">
  <path d={IconTypes[icon]}/>
</svg>

<style lang="scss">
  .left {
    transform: rotate(180deg);
  }

  .down {
    transform: rotate(90deg);
  }

  .up {
    transform: rotate(-90deg);
  }
</style>

アイコンとしてアイコンをリストに追加したので、このコンポーネントを使用すると自動補完に役立ちます.
CSSの変数を使用してCSSの部分でアイコンを制御するカスタムclassName小道具を追加しないでください.
幅と高さが働くことができるように、私はViewboxを0 0 24 24に固定しました.しかし、あなたのSVGが24 - 24と異なっているならば、あなたは幅と高さで値を変えることができるあと、viewBoxを更新しなければなりません.
それはすべてあなたの新しいアイコンのコンポーネントを歓迎します.

<Icon icon="arrow" className="arrow" position="left"/>

あなたがflexセンターを使用するalign-itemsを使用してラップの内容の中央にする必要がある場合.

Reference

この問題について(アイコンコンポーネント), 我々は、より多くの情報をここで見つけました https://dev.to/rytsh/make-icon-component-14nk

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

プログラマー-2012 KAKAO BLIND RECRUITMENT(Javaが推奨する新しいアイデア)

[TIL]モダンJavaScript Deep Dive-this