svelte awesome

苗條的人

Svg JS的很棒的SVG圖標組件，它使用字體很棒的圖標構建。基於Justineo/Vue-Awesome

Svelte-Awesome支持Font-Awesome v4.7.0 （Instoy Instoy）和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，您可能需要明確導入以下圖標組件：

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

貢獻者