Logo
A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.
setup
Import the Switch component in a script tag.
Svelte Copy
import { Logo } from "@mgisolutions/design-system/svelte";
basic usage
Basic usage Logo
Demonstrate
Svelte Copy
<Logo logoAlt="logo drberg" directUrl="/" />
size
Select size for logo
Demonstrate
Svelte Copy
<Logo logoAlt="logo drberg" directUrl="/" size="small"/>
state
Select state for logo
Demonstrate
Svelte Copy
<Logo logoAlt="logo drberg" directUrl="/" state="desktop"/>
Component Data
- props
| Name | Description | Type | Default |
|---|---|---|---|
| size | The size of the logo. | circle | large | medium | small | medium |
| state | The state of the logo. | desktop | laptop | tablet | mobile | empty |
| directUrl | Set direct url when click on logo | string | empty |
| logoAlt | Set alt image for logo | string | logo |
| mode | Set dark mode for logo | boolean | false |
| isCircle | Used circle logo, If you use circle, you don't need to use type and height, the default width and height are 210px | boolean | false |