Graphic

A graphic takes a file in src, such as an imported PNG, WebP, JPEG or SVG, or an SVG component as its children, and alt, which TypeScript requires.

import logo from './logo.svg';

<Graphic src={logo} alt="Northwind" size="md" />
<Button startIcon={<Graphic src={logo} alt="" />}>Sign in with Northwind</Button>
<Graphic alt="" tint="text">
  <PipelineIcon />
</Graphic>

• size="icon", the default, reads --env-icon-size, which an icon slot sets, else --env-control-icon-size; text sits a little below the middle of the line, as an icon in text does.
• size="fill" is a block as wide as its container, and as tall where the container has a definite height; otherwise an img takes its own shape's height, and a file in the text color is square.
• aspect, such as "16/9", sets the box's aspect-ratio: a step is then its height, and a fill takes its height from its width, so it needs no height from its container. fit="cover" covers the box and crops a file's picture, for a photo or a screenshot.
• The picture is an img with object-fit: contain, or cover, or the SVG at 100% of the box, in a grid of fixed tracks, so its size never comes from the file. An SVG component needs a viewBox; its width and height don't count.
• tint="text" paints an SVG component's filled and stroked shapes in currentColor, and a file through a CSS mask of its shape. A file from another origin needs CORS for the mask.

Trim a file once

npx envui-graphic <file> crops a PNG, WebP or JPEG to its visible content, its transparent or one-color border, and fits an SVG's viewBox to its drawing. It writes the trimmed file next to the original, or into --out <dir>, and prints the Graphic to use. It reads the files with sharp, which envUI doesn't install: add it with npm install --save-dev sharp.

npx envui-graphic src/assets/logo.png

Every icon slot, the env-icon wrapper of Button, IconButton, Menu, navigation, Tabs, Badge, fields and list rows, sizes and centers any child, an img, an svg or a Graphic, to its --env-icon-size. List.Item's and Combobox's start give an application's own svg or img the icon size too, and List.Item's an envUI symbol as well. TopBar's and PageHeader's start set a small and a medium picture's size, for a Graphic of the icon size and an svg or img alike, while an svg that follows the text, such as an envUI symbol, keeps its size.

--env-picture-size-sm, -md, -lg and -xl hold the sizes from sm to xl, which Avatar and AvatarGroup take too, so they stay the same. The lint rule no-raw-graphics reports a raw img, an svg with a fixed size, another icon package, a Graphic without alt and a margin on one.