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

task.mdevals/scenario-2/

Normalized Icon Renderer

Create a Vue component that renders a sequence of icons from mixed descriptor inputs, delegating the actual SVG rendering to the dependency's icon component. Strings should assume the solid "fas" prefix unless a different default is provided.

Capabilities

Renders mixed icon descriptors

  • With icons set to ["coffee", ["far", "bell"]], two icons appear where the string entry uses the default "fas" prefix and the tuple uses its provided prefix. @test

Supports object descriptors with labels

  • When given icons containing { prefix: "fab", iconName: "github" } and label set to "GitHub mark", the rendered SVG exposes that label via a title attribute and uses the provided prefix/name in its class list. @test

Allows custom default prefix

  • If defaultPrefix is "far" and icons is ["address-book"], the rendered icon uses that prefix instead of the "fas" default. @test

Implementation

@generates

API

export type IconDescriptor =
  | string
  | [string, string]
  | { prefix: string; iconName: string };

export interface NormalizedIconRendererProps {
  icons: IconDescriptor[];
  defaultPrefix?: string;
  label?: string;
}

export default DefineComponent<NormalizedIconRendererProps>;

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Provides Vue components that normalize icon descriptors into rendered SVG icons.

Install with Tessl CLI

npx tessl i tessl/npm-fortawesome--vue-fontawesome

tile.json