@iso-safety-signs/vue
@iso-safety-signs/vue
Vue 3 components (inline SVG) for all ISO 7010 workplace safety signs. Tree-shakeable, fully accessible, zero runtime dependencies beyond Vue.
Installation
npm install @iso-safety-signs/vue
# or
yarn add @iso-safety-signs/vue
Usage
Named components (generated)
<script setup>
import { E001EmergencyExit, W001FlammableMaterial } from '@iso-safety-signs/vue';
</script>
<template>
<E001EmergencyExit :width="64" />
<W001FlammableMaterial :width="64" title="Flammable material" />
</template>
Dynamic rendering by ID
Use SignById when the ID comes from data rather than being known at compile time:
<script setup>
import { SignById } from '@iso-safety-signs/vue';
defineProps<{ signId: string }>();
</script>
<template>
<SignById :id="signId" :width="120" />
</template>
Returns null for unrecognised IDs.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width |
number | string |
SVG intrinsic width | Width of the <svg> element |
height |
number | string |
SVG intrinsic height | Height of the <svg> element |
title |
string |
Sign name | Accessible title (<title> inside SVG) |
description |
string |
Sign description | Accessible description (<desc> inside SVG) |
SignById also requires:
| Prop | Type | Description |
|---|---|---|
id |
string |
Sign slug ID, e.g. "e001-emergency-exit-left-hand" |
Accessibility
Every component renders with role="img" and aria-labelledby pointing to <title> and <desc> elements injected inside the SVG. Passing an aria-label attribute labels the <svg> directly instead. Ids are unique per instance (via useId() on Vue 3.5+), so the same sign can appear any number of times on a page.
License
MIT © Karl Norling
Related Packages
Version History
| Version | Released | License |
|---|---|---|
| 1.0.3 | MIT | |
| 1.0.2 | MIT | |
| 1.0.1 | MIT | |
| 1.0.0 | MIT |