---
title: Logo
---
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { ComponentDocs } from '@site/src/components/component-docs.js'
import * as jsdoc from '@site/prebuild/jsdoc/components.logo.mjs'
import { FreeSewingLogoExample } from './_examples.js'
<DocusaurusDoc>
- [Components](#components)
## Components
The **Logo** component family provides the following components:
- [FreeSewingLogo](#freesewinglogo)
### FreeSewingLogo
:::tip Understanding the colors of the logo
The logo will always be filled with `currentColor` which is a specific keyword
that will be substituted with whatever the current text color is.
Furthermore, two logos will be stacked on top of each other.
The one filled with `currentColor` sits on top, and below it sits one that is
not filled, but stroked with `var(--background-base-100)`.
This ensures that if the logo is placed on a background with low contrast, it
stands out On the default background, the stroked version will be the same
color, so it will be invisible.
You can also set an explicit stroke color with the `stroke` prop, or control
`currentColor` by setting the `className` prop.
:::
<ComponentDocs docs={jsdoc.jsdocFreeSewingLogo} example={FreeSewingLogoExample} />
</DocusaurusDoc>
22a89f12d3