Getting started

This guide will help you get started with YCloud in your Preact project. Make sure you have a Preact environment set up. If you don't have one yet, you can create a new Preact project using Create Preact App, Vite, or any other Preact boilerplate of your choice.

Installation

pnpm

pnpm add @ycloud-web/icons-preact

yarn

yarn add @ycloud-web/icons-preact

npm

npm install @ycloud-web/icons-preact

bun

bun add @ycloud-web/icons-preact

Importing your first icon

YCloud is built with ES Modules, so it's completely tree-shakable.

Each icon can be imported as a Preact component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

import { Camera } from '@ycloud-web/icons-preact';

// Usage
const App = () => {
  return <Camera />;
};

export default App;

Props

To customize the appearance of an icon, you can use the following props:

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

Because icons render as SVG elements, all standard SVG attributes can also be applied as props. See the list of SVG Presentation Attributes on MDN.

// Usage
const App = () => {
  return (
    <Camera
      size={48}
      color="red"
      strokeWidth={1}
    />
  );
};

More examples and details how to use props, continue the guide:

ColorAdjust the color of your iconsSizingAdjust the size of your iconsStroke widthAdjust the stroke width of your icons