Official Vue component for Font Awesome 7
87
{
"context": "Evaluates how well the solution leverages @fortawesome/vue-fontawesome to render masked icons. Focuses on wiring the library's icon, mask, maskId, and accessibility props rather than recreating SVG masking logic. Ensures masking behavior is stable across instances and rerenders.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Mask prop",
"description": "Base icon render uses FontAwesomeIcon's `mask` prop to supply the mask icon instead of manually building SVG masks.",
"max_score": 30
},
{
"name": "MaskId binding",
"description": "Provided `maskId` is passed through to FontAwesomeIcon's `maskId` prop so mask definitions and references share the caller's id.",
"max_score": 25
},
{
"name": "Auto id strategy",
"description": "When no maskId is given, a collision-free id is generated and bound via FontAwesomeIcon's `maskId` prop so multiple instances render distinct masks while keeping a stable id per instance.",
"max_score": 15
},
{
"name": "Icon prop handling",
"description": "Base icon input is forwarded through FontAwesomeIcon's `icon` prop using the package-supported input shapes (string, [prefix, name] tuple, or { prefix, iconName } object) without custom SVG paths.",
"max_score": 15
},
{
"name": "Title passthrough",
"description": "Optional title/aria text is relayed through FontAwesomeIcon's accessibility props (e.g., `title` or `titleId`) rather than custom wrappers.",
"max_score": 15
}
]
}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