Composables

Image Element

Align image and SVG elements to vertical middle using the useImgElement composable.

Overview

The useImgElement composable sets vertical-align: middle on img and svg elements, preventing the small gap that appears below inline images due to baseline alignment. This is a config-free composable with no customization options.

`useImgElement`

function useImgElement(s: Styleframe): void

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useImgElement } from '@styleframe/theme';

const s = styleframe();

useImgElement(s);

export default s;

styleframe/index.css

img, svg {
    vertical-align: middle;
}

This composable takes no configuration options, creates no CSS custom properties, and returns void. It targets both img and svg elements.

Edit this pageorReport an issue

Iframe

Remove the default border from iframe elements using the useIframeElement composable.

Kbd

Style keyboard input elements with configurable background, color, font, border radius, and padding using the useKbdElement composable.