Official Vue component for Font Awesome 7
87
{
"context": "Evaluates how the solution uses @fortawesome/vue-fontawesome to render icons with selectable animation presets and optional layered badges while keeping animations reactive.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Icon binding",
"description": "Uses FontAwesomeIcon from @fortawesome/vue-fontawesome and feeds it a valid icon value derived from the provided IconInput (IconDefinition or [prefix, name]/{prefix, iconName}), rather than custom SVGs.",
"max_score": 20
},
{
"name": "Animation mapping",
"description": "Maps each AnimationEffect value to the matching FontAwesomeIcon boolean prop: spin -> spin, pulse -> pulse, bounce -> bounce, shake -> shake, beat -> beat, fade -> fade, beatFade -> beatFade, flash -> flash, spinPulse -> spinPulse, spinReverse -> spinReverse, swapOpacity -> swapOpacity; \"none\" disables all of them.",
"max_score": 40
},
{
"name": "Reactive switch",
"description": "Effect changes update the same FontAwesomeIcon instance reactively (e.g., bound props or computed mapping) instead of remounting or re-creating the icon node.",
"max_score": 15
},
{
"name": "Layered badge",
"description": "Stacks primary and badge icons with FontAwesomeLayers from the package, giving each its own FontAwesomeIcon and animation props so badgeEffect can differ from effect.",
"max_score": 15
},
{
"name": "Spin variants",
"description": "Supports the spinPulse and spinReverse variants alongside the base spin/ pulse options, ensuring swapOpacity is honored when requested.",
"max_score": 10
}
]
}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