Svgl Svelte is an open-source library that allows you to use Svgl’s high-quality brand SVG logos as reusable Svelte components.
Features
🍃 Tree-Shakable: Only the logos you import and use will be included in your final application bundle, leading to smaller asset sizes.
🎨 Customizable: You can pass props to customize SVG attributes like size.
💪 Fully Typed Components: Provides better code quality and developer experience with TypeScript.
🔎 Optimized SVGs: Each logo is optimized for web performance.
Use Cases
- Brand Representation: Display logos of partners, clients, or technologies on your Svelte website.
- UI Consistency: Use standardized SVG logos in navigation bars, footers, or feature sections for a polished look.
- Portfolio Enhancement: Showcase tools and technologies you have worked with by displaying their official logos in your Svelte-based portfolio.
- Marketing Materials: Quickly add brand logos to digital marketing assets or presentations developed with Svelte.
- Sponsor Sections: Neatly list sponsor logos for events or projects on your Svelte application.
Installation
npm install @selemondev/svgl-svelte
# or
yarn add @selemondev/svgl-svelte
# or
pnpm add @selemondev/svgl-svelte
# or
bun add @selemondev/svgl-svelteUsage
1. Explore the available SVG logos on the Svgl logos page.
2. Import the logo icon as a Svelte component and then use it in your template. You can adjust attributes like height and width directly on the component.
<script lang="ts">
import { SvelteLogo } from '@selemondev/svgl-svelte';
</script>
<SvelteLogo height={200} width={200} />3. Replace SvelteLogo with the specific logo component you wish to use from the library.
Related Resources
- svgl-react: For integrating SVG logos into React projects. You can find it on GitHub: https://github.com/ridemountainpig/svgl-react
- svgl-vue: For using SVG logos within Vue applications. The repository is available here: https://github.com/selemondev/svgl-vue
- pheralb/svgl: The main repository and source for the SVG logos, built with SvelteKit and Tailwind CSS. Explore it here: https://github.com/pheralb/svgl
FAQs
Q: Can I customize the colors or styling of the logo components?
A: The logos maintain their official brand colors and styling to preserve brand integrity. You can control dimensions through width and height props, but color modifications should be avoided to respect brand guidelines.
Q: Will unused logo components affect my bundle size?
A: No, the package is tree-shakable, meaning only the logo components you actually import will be included in your final bundle.
