Skip to content

Latest commit

 

History

History
42 lines (27 loc) · 2.12 KB

assets.md

File metadata and controls

42 lines (27 loc) · 2.12 KB

Assets

Head Start provides a pre-configured setup for common assets like fonts and icons.

src/assets/ vs public/ assets

Astro copies all assets in public/ to the web root (dist/). Using the public/ directory is suitable for static assets that don't require a build step and should be available as is. For example a some .wellknown file.

Head Start uses the src/assets/ directory to organise raw assets that do require a build step. You are responsible for the processing and importing of these assets. Head Start provides a pre-configured setup for fonts and icons. These assets are eventually compiled to dist/_astro/ and are configured to be served with immutable cache headers for performance.

Fonts

Head Start provides a setup for custom fonts to improve their loading performance. An example font (Archivo) is pre-configured in src/assets/fonts.ts. To add your own custom fonts:

  1. Install the custom font. If it's an open source font, the easiest way is to install your custom font using Fontsource. Otherwise copy your custom font files (woff2) to src/assets/fonts/ manually.
  2. Replace the example font imports in src/assets/fonts.ts with those of your custom fonts.
  3. Replace the const fonts and const fontsFamily... values to match the name and variations of your custom fonts.

That's it. Head Start will now automatically preload the font files and include critical CSS for your custom fonts.

Icons

Head Start combines icons in a sprite and makes them available through the <Icon> component. To use an icon:

  1. Add an SVG icon to src/assets/icons/. For example a share.svg icon.
  2. Use the Icon component with name="share" (SVG file basename):
---
import Icon from '@components/Icon/';
---
<Icon name="share">

<style>
  /* optional: style on data attribute, or add a class */
  [data-icon="share"] {
    color: red;
  }
</style>