svelte-hover-draw-svg
v3.0.1
Published
A lightweight Svelte component to draw SVG on hover.
Downloads
92
Readme
A lightweight Svelte component to draw SVG on hover.
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>