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-9/

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

tile.json