svelte awesome

엄청나게 멋진

글꼴 멋진 아이콘으로 제작 된 Svelte JS 용 멋진 SVG 아이콘 구성 요소. Justineo/Vue를 기반으로합니다

Svelte-Onesome은 글꼴을 제공하는 v4.7.0 (아이콘이 내장) 및 v5 / v6 ( @fortawesome NPM 패키지를 통해)을 지원합니다.

여기에서 데모를 사용할 수 있습니다

사용 가능한 모든 임베디드 아이콘 목록은 여기에서 사용할 수 있습니다.

설치

NPM

npm install --save svelte-awesome

용법

 <!-- basic -->
< Icon data =" {beer} " />
<!-- codeFork is camelCase, unlike the js file, code-fork.js -->
< Icon data =" {codeFork} " />

<!-- with options -->
< Icon data =" {refresh} " scale =" 2 " />
< Icon data =" {comment} " flip =" horizontal " />
< Icon data =" {codeFork} " label =" Forked Repository " />

<!-- stacked icons [WIP] -->
< Icon label =" No Photos " >
  < Icon data =" {camera} " />
  < Icon name =" {ban} " scale =" 2 " class =" alert " />
</ Icon >

<!-- FontAwesome v5 and v6 Icons supported -->
< Icon data =" {faThumbsUp} " />

< script >
  import Icon from 'svelte-awesome' ;

  /// *** Embedded Icons ***
  // Recommended - import just the icon you need
  import beer from 'svelte-awesome/icons/beer' ;
  import refresh from 'svelte-awesome/icons/refresh' ;
  import codeFork from 'svelte-awesome/icons/codeFork' ;
  import camera from 'svelte-awesome/icons/camera' ;
  import ban from 'svelte-awesome/icons/ban' ;
  // Not recommended as it will download all of the icons in dev mode
  import { ban } from 'svelte-awesome/icons' ;

  // EDGECASE ICONS - different names due to reserved names / starting with numbers
  import fa500px from 'svelte-awesome/icons/fa500px' ; // '500px' icon
  import faTry from 'svelte-awesome/icons/faTry' ; // 'try' icon

  /// *** @fortawesome/* Icons ***
  // Recommended - import the individual icon a little like with the recommended embedded icons approach above
  import { faThumbsUp } from '@fortawesome/free-regular-svg-icons/faThumbsUp' ;
  // Not Recommended - import the individual icon from the main file - it will download all of the icons in dev mode
  import { faThumbsUp } from '@fortawesome/free-regular-svg-icons' ;
</ script > 

Sapper 사용량

Sapper의 경우 다음과 같이 아이콘 구성 요소를 명시 적으로 가져와야 할 수도 있습니다.

 import Icon from 'svelte-awesome/components/Icon.svelte' ; 

기고자