Nascent Political Miscreant

    svelte-hover-draw-svg
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.6 • Public • Published

    Svelte MultiSelect
     Svelte Hover Draw SVG

    A lightweight Svelte component to draw SVG on hover.

    REPL Commitizen friendly NPM version npm bundle size CI Release license

    Svelte MultiSelect


    Features

    • 🤏 Lightweight: Wrapper component with only svelte as dev dependency
    • 😌 Straightforward: Just put your SVG or component with SVG under the component
    • 📦 Encapsulated: Expose hovering for extra hover effects & conditionals
    • 🛠 Customizable: CSS variable --duration to set the duration

    Blog post @hashnode: Build a Svelte Component To Draw SVG On Hover

    Install

    npm install --save-dev svelte-hover-draw-svg
    
    yarn add -D svelte-hover-draw-svg
    
    pnpm add -D svelte-hover-draw-svg

    Prerequisite:

    SVG shape must have a stroke

    <svg stroke="#000" stroke-width="2">
      <path />
    </svg>

    This library works better with "Outlined" SVGs.

    Usage

    • Inline SVG:
    <script>
      import HoverDrawSVG from 'svelte-hover-draw-svg';
    </script>
    
    <HoverDrawSVG>
      <svg>
        <path />
      </svg>
    </HoverDrawSVG>
    • SVG Component (set draw time to 2s, default is 1s):
    <script>
      import HoverDrawSVG from 'svelte-hover-draw-svg';
    </script>
    
    <HoverDrawSVG --duration="2">
      <SvgComponent />
    </HoverDrawSVG>
    • Nested elements (expose hovering status):
    <script>
      import HoverDrawSVG from 'svelte-hover-draw-svg';
    </script>
    
    <HoverDrawSVG let:hovering>
      <a href="/" class:hoverEffect={hovering}>
        <svg>
          <path />
        </svg>
      </a>
    </HoverDrawSVG>

    Install

    npm i svelte-hover-draw-svg

    DownloadsWeekly Downloads

    59

    Version

    2.1.6

    License

    MIT

    Unpacked Size

    19.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • davipon