https://github.com/kaf-lamed-beyt/nextra-logo
Render variations of your logos in dark and light mode for the Nextra framework.
https://github.com/kaf-lamed-beyt/nextra-logo
docs nextjs nextra react typescript
Last synced: about 2 months ago
JSON representation
Render variations of your logos in dark and light mode for the Nextra framework.
- Host: GitHub
- URL: https://github.com/kaf-lamed-beyt/nextra-logo
- Owner: kaf-lamed-beyt
- License: mit
- Created: 2023-02-02T11:46:15.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-03T22:27:54.000Z (over 1 year ago)
- Last Synced: 2025-03-10T17:07:56.368Z (2 months ago)
- Topics: docs, nextjs, nextra, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/nextra-logo
- Size: 76.2 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# nextra-logo
Render variations of your logos in dark and light mode for the [Nextra](https://nextra.site/) framework.
## Usage
I'm not sure if this package works in conventional React applications, as it was built with the Nextra framework in focus, alone. Since the component uses some properties of [`matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) Web API extended from the `next-themes` package by default.
But, please feel free to use it and give your [feedback](https://github.com/kaf-lamed-beyt/nextra-logo/issues). I'd be so delighted to learn about what needs to be improved as the package grows
Install the package from the [NPM](https://www.npmjs.com/package/nextra-logo) registry.
```bash
yarn add nextra-logo@latest
```
Proceed to import the package in your doc site's config file
```jsx
// theme.config.tsx
import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
import { Logo } from "nextra-logo";
const config: DocsThemeConfig = {
project: {
link: "link-to-your-project.com",
},
docsRepositoryBase: "link-to-your-repo.com",
logo: ,
};
export default config;
```
The component receives these three props: `light`, `dark` that accept the patsh to where your logos are kept, and the `size` that determines how big you want your logo to be.
Ideally, you would place your images in the `public/` folder when you're using Next.js, and since Nextra is mostly Next.js, I'd recommend you place your images that folder.
Then you can go ahead to use the component like so: 🔽
```tsx
const config: DocsThemeConfig = {
logo: (
),
};
```
## Optional props
Say you have a logo that does not show your brand name, with `nextra-logo`, you can provide a value to the `logoText` prop and customize it however you wish with the `textSize` and `textWeight` props, for the size and weight of your brand text, respectively.
```tsx
import { Logo } from "nextra-logo";
;
```
The snippet above assumes that you've placed your logos in a sub-directory — `logo` — in the public folder.
You can learn more about Nextra, [here](https://nextra.site/docs/docs-theme/start)
## Contributing
Checkout the [contributing guide](CONTRIBUTING.md)