Official Vue component for Font Awesome 7
87
{
"context": "Evaluates whether the LayeredBadge component uses @fortawesome/vue-fontawesome layering primitives to render text badges with correct default overlay, corner positioning, counter styling, and accessible labeling. Emphasizes package-specific props and classes rather than general coding style.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Layer wrapper",
"description": "Wraps the base icon and badge inside FontAwesomeLayers (fa-layers/fa-fw) so the overlay sits on top without altering icon alignment or width.",
"max_score": 25
},
{
"name": "Badge text",
"description": "Renders the badge through FontAwesomeLayersText so provided text appears in the default top-right overlay and omits the text node entirely when no badge value is supplied.",
"max_score": 25
},
{
"name": "Corner mapping",
"description": "Uses the position prop on FontAwesomeLayersText to map user-selected corners (top-left, top-right, bottom-left, bottom-right) to the corresponding Font Awesome positioning classes.",
"max_score": 25
},
{
"name": "Counter label",
"description": "Enables counter styling by setting the counter prop on FontAwesomeLayersText for numeric badges and applies a package-supported accessible label (e.g., title/titleId on the layered group) that combines icon description and badge value.",
"max_score": 25
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-fortawesome--vue-fontawesomedocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10