Component Preview Thumbnails

When an editor is selecting a component in CloudCannon, the icon from the component spec will be used as the default thumbnail:

spec:
  icon: nature_people 

You can provide a custom image to use instead by placing a matching <component>.preview.<format> file in your component directory. This will only be shown when adding new components to a page:

_component-library/
└─ components/
   └─ hero/
      ├─ hero.bookshop.yml
      ├─ hero.eleventy.liquid
      └─ hero.preview.png 

You can also specify a <component>.icon.<format> file, which will be shown alongside existing components in CloudCannon's array view:

_component-library/
└─ components/
   └─ hero/
      ├─ hero.bookshop.yml
      ├─ hero.eleventy.liquid
      └─ hero.icon.svg