{"repo":"poppa/sveltekit-svg","free":true,"listed":false,"github":"https://github.com/poppa/sveltekit-svg","clone":"git clone https://github.com/poppa/sveltekit-svg.git","description":"SvelteKit plugin that makes it possible to import SVG files as Svelte components, inline SVG code or urls","language":"TypeScript","stars":297,"topics":["sveltekit","vite-plugin","sveltekit-plugin","svelte","svelte3","svelte4","vite","vitejs","svelte5","svg"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"SvelteKit SVG Plugin This plugin makes it possible to import SVG files as Svelte components, inline SVG code or urls. ### NOTE! For Svelte 4 projects, use version 4 of this plugin NOTE! This plugin isn't just for SvelteKit, but works for any Svelte project using Vite Install - yarn add --dev @poppanator/sveltekit-svg - npm install -D @poppanator/sveltekit-svg Usage In your vite.config.js You can also pass multiple svg transformers based on paths if you want to apply different SVGO options for different SVGs Svelte usage Import as a Svelte component: NOTE! It's recommended that you use the ?component query string if you use the suggested type definition below. The reason is that Vite ships a type definition for .svg which states that import Comp from './file.svg returns a string. So providing a default type definition for .svg is in most cases causing a conflict which will lead to TSC errors when treating such an import as a Svelte component. So the best way to avoid errors, current and future, is to always use import Comp from './file.svg?component with the suggested type definition at the end of this file. When used as a component you can also pass attributes to the SVG Import as file path: Import as data URL: In contrast to ?url this will apply SVGO optimization/transform before the the SVG is turned into a data URL You can also pass the SVGO config option datauri as value to ?dataurl . This will, for instance, generate an URI encoded string Import as code: Options { includ","default_branch":null,"files":null,"tree":[],"storefront":"/r/poppa","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/poppa/sveltekit-svg/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}