Product Logo
Displays various Sprout product logo. This component allows specifying the product name and the desired color theme.
Basic Usage
Shows the default logo (hr name, dark theme).
vue
<template>
<spr-logo />
</template>
<script setup lang="ts">
import SprLogo from '@/components/logo/logo.vue';
</script>Themes
You can change the logo theme using the theme prop.
vue
<template>
<spr-logo theme="white" name="hr" />
<spr-logo theme="dark" name="hr" />
<spr-logo theme="gray" name="hr" />
<spr-logo theme="green" name="hr" />
</template>
<script setup lang="ts">
import SprLogo from '@/components/logo/logo.vue';
</script>Names
Specify different product logo using the name prop.
vue
<template>
<spr-logo name="benchmark" />
<spr-logo name="ecosystem" />
<spr-logo name="engage" />
<spr-logo name="finances" />
<spr-logo name="hr-mobile" />
<spr-logo name="hr" />
<spr-logo name="inbound" />
<spr-logo name="insight" />
<spr-logo name="instacash" />
<spr-logo name="instawage" />
<spr-logo name="payroll" />
<spr-logo name="performance-plus" />
<spr-logo name="procurement" />
<spr-logo name="professional-services" />
<spr-logo name="recruit" />
<spr-logo name="recruit-plus" />
<spr-logo name="sail" />
<spr-logo name="sidekick" />
<spr-logo name="wellness" />
</template>
<script setup lang="ts">
import SprLogo from '@/components/logo/logo.vue';
</script>API Reference
| Name | Description | Type | Available Values | Default |
|---|---|---|---|---|
| name | Specifies the product logo to display. | String | 'benchmark', 'ecosystem', 'engage', 'finances', 'hr-mobile', 'hr', 'inbound', 'insight', 'instacash', 'instawage', 'payroll', 'performance-plus', 'procurement', 'professional-services', 'recruit', 'recruit-plus', 'sail', 'sidekick', 'wellness' | 'hr' |
| theme | Specifies the color theme of the logo. | String | 'white', 'dark', 'gray', 'green' | 'dark' |
| size | Specifies the size of the logo. Can be in px, em, or just a number. If a number is provided, it will be treated as pixels (px). | String, Number | - | 50 |