cla-insignia

The Claromentis insignia component. Named 'insignia' to avoid confusion with Bootstrap 'badge' namespace.

The component insignias-svg.json the SVG code from there. See below for instructions on how to add new shapes to the file.

In order to use with an image please use the cla-insignia-image component

e.g.

<cla-insignia colour="#c82333" size="x-small" shape="hexagon" type="outline">
     <cla-insignia-image size="x-small" source="/assets/icons/insignias/044-trophy-3@2x.svg"></cla-insignia-image>
</cla-insignia>

insignia .json guide

JSON object structure:

{
    "shape": {
      "fill": "",
      "outline" : "",
      "empty": ""
    }
}

shape e.g. hexagon

When adding a new shape make sure you have input the code for each "fill", "outline" and "empty" You may need to use a JSON escape tool to ensure the SVG code is formatting correctly e.g. https://www.freeformatter.com/json-escape.html

For fill and outline shapes classes need to be added to the paths in order for the SVG to pick up the correct insignia colour.

Fill

  • The inside path needs the class inner
  • The outside path needs the class outer

Outline

  • The path needs the class outer

See existing shapes for guidance

Properties

Property Attribute Description Type Default
colour colour The insignia colour. string "#76cef9"
shape shape The insignia shape: 'hexagon', '' or ''. Default: 'hexagon' "hexagon" "hexagon"
type type The insignia fill option: 'fill', 'outline' or 'empty'. Default: 'hexagon' "empty" | "fill" | "outline" "fill"
width width The insignia width. string undefined

Slots

Slot Description
Holds the cla-insignia-image

Built with StencilJS

UI Components