Skip to content

wd-David/svelte-hover-draw-svg

Repository files navigation

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>