Alpine.js

AWS Architecture Icons for Alpine.js — an x-aws-icon directive and $awsIcon magic with tree-shakeable icon data. 805 icons in architecture-group, architecture-service, category, and resource sets.

Install

pnpm add @aws-icons/alpine

Usage

import Alpine from 'alpinejs';
import awsIcon, {register} from '@aws-icons/alpine';
import {AmazonEc2} from '@aws-icons/alpine/architecture-service';

register(AmazonEc2);
Alpine.plugin(awsIcon);
Alpine.start();

<span x-aws-icon="'amazon-ec2'"></span>
<span x-aws-icon="{name: 'amazon-ec2', style: 'resource', label: 'AmazonEc2'}"></span>
<span x-data x-html="$awsIcon('amazon-ec2', 'architecture-service')"></span>

Only registered icons end up in your bundle. Without label the svg is aria-hidden.