Skip to Content

Logo and Fonts

  • There are two SVG files for logos: logo.svg and icon.svg in src/lib/resources, and they have the corresponding util wrappers at src/components/utils/Logo.tsx and [...]/LogoIcon.tsx.
  • The logo is the full logo, used by default in places like the Header and Footer. The icon/LogoIcon is used as the favicon.
  • Both can be easily used in React by using the Logo and LogoIcon components. You can change in their files their default size.

Making your Logo & Icon

You can create your Logo and Icon either by using SVG or JSX.

SVG

To create/change your .svg logo, can either use:

  1. Inkscape . The best free SVG tool.
  2. Illustrator . The best paid SVG tool. Has an integrated AI to generate SVGs. Has a 7-day free trial.

You can also use the following helper tools:

  1. https://vectorizer.com  - Converts .png to .svg. Free. You can easily generate .png images using ChatGPT, for example, and then use this tool. Then use Inkscape to do any required fixes.
  2. https://vectorizer.ai  - Converts .png to .svg using AI, has better results than the above. Paid.
  3. https://neosvg.com/  - SVG generation with AI. Paid.

You can dynamically color your SVG component if you open the .svg file and change the fill attribute to currentColor, so you can <LogoIcon color="red" />.

JSX

If you don’t want to deal with .svg files, you can delete them and directly define them in the src/components/utils/Logo.tsx and [...]/LogoIcon.tsx files using React code.

Mixed

You can also use a mix of both. For example, you can have the SVG file for the icon and in the Logo.tsx file, you can use the LogoIcon component and add the project name next to it.

Favicon

  • As said above, the favicon is automatically generated using the src/lib/resources/icon.svg file!
  • You can do fine changes to the favicon by changing the src/app/icon.tsx file. There you can change the background color and radius and fine-position the icon if it’s not perfectly centered.

Fonts

Last updated on