Nukem's Possible Manifestation

    svelte-yafal
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    svelte-yafal (Yet another font awesome library)

    Minimal yet meaningful abstractions for Fontawesome icons in Svelte.

    REPL

    Features

    • Normalized dimensions
    • Animations
    • Easy to combine icons
    • Low overhead, based on the tree-shakeable @fortawesome/ packages

    Installation

    npm i svelte-yafal -D

    Usage

    Basics

    <script>
    	import { FaSvg, Icon } from 'svelte-yafal';
    	import { faFlag } from '@fortawesome/free-solid-svg-icons';
    </script>
    
    <FaSvg><Icon icon="{faFlag}" size="{3}" /></FaSvg>

    Animations

    <FaSvg beat>
    	<Icon icon="{faHeart}" />
    </FaSvg>

    Transformations

    <FaSvg>
    	<Icon
    		icon="{faFlag}"
    		translateX="{256}"
    		translateY="{128}"
    		scale="{0.25}"
    		rotate="{90}"
    		flipX
    		flipY
    	/>
    </FaSvg>

    Layers

    <FaSvg>
    	<Icon icon="{faCalendar}" />
    	<Icon icon="{faSun}" scale="{0.2}" />
    	<text x="100" y="450" font-size="250">23</text>
    </FaSvg>

    The units used for positioning will be in the frame of reference of the SVG. x=0 would start the text from the left edge, whereas 512 would push it beyond the right edge.

    Contributions

    Feature requests and PRs are welcome. New features will only be added upon request so as to not bloat things.

    Install

    npm i svelte-yafal

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    10.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • gtmnayan