No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Icon

Our <post-icon> component renders SVGs, so it scales quickly and easily and can be styled with CSS.

<post-icon name="1022"></post-icon>
NameDescriptionDefaultControl
General
name*
The name/id of the icon (e.g. 1000, 1001, ...).
string
base
The base path, where the icons are located (must be a public url).
Leave this field empty to use the default cdn url.
string
null
props
flip-h
When set to true, the icon will be flipped horizontally.
boolean
false
flip-v
When set to true, the icon will be flipped vertically.
boolean
false
scale
The number for the css scale transformation.
number
null
rotate
The number of degree for the css rotate transformation.
number
null
animation
The name of the animation.
"cylon""cylon-vertical""fade""spin""spin-reverse""throb"
null

By default, icons inherit the current text color of their parent element.
You can therefore colorize an icon using our text color utilities or by setting the CSS directly through a style attribute or self-defined classes.

<post-icon name="1022" class="text-primary"></post-icon>
<post-icon name="1022" class="text-info"></post-icon>
<post-icon name="1022" class="text-success"></post-icon>
<post-icon name="1022" style="color: blue"></post-icon>
<post-icon name="1022" style="color:#800080"></post-icon>
<post-icon name="1022" style="color: rgb(230, 0, 0)"></post-icon>

Icons have a default width of 1em, which means they will scale with the size of the current font-size. Therefore, you can manage the size of an icon using our font-size utilities or by setting the CSS directly through a style attribute or self-defined classes.

<post-icon name="1022" style="font-size: 1rem"></post-icon>
<post-icon name="1022" class="h3"></post-icon> <post-icon name="1022" class="h1"></post-icon>
<post-icon name="1022" class="fs-huge"></post-icon>
<post-icon name="1022" style="font-size: 4rem"></post-icon>
<post-icon name="1022" style="font-size: 6rem"></post-icon>

With the use of our border,background and padding utilities, you can create various styling effects.

<post-icon name="1022" class="border rounded p-3" style="font-size: 4rem"></post-icon>
<post-icon
  name="1022"
  class="border border-success rounded p-3 text-success"
  style="font-size: 4rem"
></post-icon>
<post-icon name="1022" class="rounded-circle bg-info p-3" style="font-size: 4rem"></post-icon>

Flip the icon horizontally and/or vertically with the flip-h and flip-v props.

<post-icon name="1022"></post-icon> <post-icon name="1022" flip-h="true"></post-icon>
<post-icon name="1022" flip-v="true"></post-icon>
<post-icon name="1022" flip-h="true" flip-v="true"></post-icon>

Scale the icon by any positive factor via the scale prop. Note this changes the icon's visual size but not its physical font size. To illustrate this we have added a background color to the icons.

<post-icon name="1022" class="bg-info" scale="0.5"></post-icon>
<post-icon name="1022" class="bg-info"></post-icon>
<post-icon name="1022" class="bg-info" scale="1.5"></post-icon>

Rotate the icon by a number of degrees with the rotate prop. Positive values will rotate the icon clockwise, while negative values will rotate the icon counterclockwise.

<post-icon name="1022" rotate="-365"></post-icon> <post-icon name="1022" rotate="-249"></post-icon>
<post-icon name="1022" rotate="-35.5"></post-icon> <post-icon name="1022" rotate="0"></post-icon>
<post-icon name="1022" rotate="98"></post-icon> <post-icon name="1022" rotate="365"></post-icon>
<post-icon name="1022" rotate="753"></post-icon>

The post-icon includes the following built-in animations for icons:

  • cylon slides the icon left and right
  • cylon-vertical slides the icon up and down
  • spin smoothly spins the icon clockwise
  • spin-reverse smoothly spins the icon counter-clockwise
  • fade fades the icon in and out
  • throb scales the icon in and out

To use them, set the animation prop to one of the animation names above.

Animation: cylon

Animation: cylon-vertical

Animation: spin

Animation: spin-reverse

Animation: fade

Animation: throb

<div class="w-50 py-3">
  <p class="text-muted fs-tiny">Animation: cylon</p>
  <post-icon name="2253" animation="cylon"></post-icon>
</div>

<div class="w-50 py-3">
  <p class="text-muted fs-tiny">Animation: cylon-vertical</p>
  <post-icon name="2252" animation="cylon-vertical"></post-icon>
</div>

<div class="w-50 py-3">
  <p class="text-muted fs-tiny">Animation: spin</p>
  <post-icon name="2041" animation="spin"></post-icon>
</div>

<div class="w-50 py-3">
  <p class="text-muted fs-tiny">Animation: spin-reverse</p>
  <post-icon name="2042" animation="spin-reverse"></post-icon>
</div>

<div class="w-50 py-3">
  <p class="text-muted fs-tiny">Animation: fade</p>
  <post-icon name="2151" animation="fade"></post-icon>
</div>

<div class="w-50 py-3">
  <p class="text-muted fs-tiny">Animation: throb</p>
  <post-icon name="2063" animation="throb"></post-icon>
</div>