CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-fortawesome--vue-fontawesome

Official Vue component for Font Awesome 7

87

1.15x
Overview
Eval results
Files

rubric.jsonevals/scenario-5/

{
  "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-fontawesome

tile.json