svelte-hover-draw-svg
svelte-hover-draw-svg copied to clipboard
A lightweight Svelte component to draw SVG on hover.
βSvelte Hover Draw SVG
A lightweight Svelte component to draw SVG on hover.
![Svelte MultiSelect](https://github.com/wd-David/svelte-hover-draw-svg/raw/main/assets/svelte-hover-draw-svg.gif)
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>