shd
svelte-hover-draw-svg
npm i svelte-hover-draw-svg
shd

svelte-hover-draw-svg

A lightweight Svelte component to draw SVG on hover.

by David Peng

2.1.3 (see all)License:MITTypeScript:Built-In
npm i svelte-hover-draw-svg
Readme

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

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>

Downloads/wk

165

GitHub Stars

20

LAST COMMIT

4mos ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

1

OPEN PRs

1
VersionTagPublished
2.1.3
latest
15d ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate