JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 64
  • Score
    100M100P100Q61871F
  • License Apache-2.0

icons from Forter Components

Package Exports

  • @forter/icons
  • @forter/icons/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@forter/icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

fc-icon-svg

An element presenting a font icon.

Usage

<script>
import '@forter/icon-font';
</script>

<fc-icon-svg name="fingerprint">
</fc-icon-svg>

Examples

<!-- custom -->
<fc-icon-svg color="gold" size="huge">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><defs> <radialGradient id="x6qp1zx4mc" cx="50%" cy="50%" r="46.479%" fx="50%" fy="50%" gradientTransform="scale(-.99236 -1) rotate(45.822 1.181 -1.188)">  <stop offset="11.979%" stop-color="#21DFA3"></stop>  <stop offset="100%" stop-color="#1EF9B4" stop-opacity="0"></stop> </radialGradient> <radialGradient id="c3seltdcje" cx="50%" cy="50%" r="46.479%" fx="50%" fy="50%" gradientTransform="scale(-.99236 -1) rotate(45.822 1.181 -1.188)">  <stop offset="11.979%" stop-color="#21DFA3"></stop>  <stop offset="100%" stop-color="#1EF9B4" stop-opacity="0"></stop> </radialGradient> <radialGradient id="s9eplprnxf" cx="50%" cy="50%" r="46.479%" fx="50%" fy="50%" gradientTransform="scale(-.99236 -1) rotate(45.822 1.181 -1.188)">  <stop offset="11.979%" stop-color="#005DE8"></stop>  <stop offset="100%" stop-color="#FFF" stop-opacity="0"></stop> </radialGradient> <linearGradient id="flxcwa0nrb" x1="-30%" x2="60.733%" y1="184.585%" y2="23.089%">  <stop offset="0%" stop-color="#005DE8"></stop>  <stop offset="100%" stop-color="#00D894"></stop> </linearGradient> <linearGradient id="ql9rbb4acd" x1="-30.008%" x2="60.723%" y1="184.583%" y2="23.089%">  <stop offset="0%" stop-color="#005DE8"></stop>  <stop offset="100%" stop-color="#00D894"></stop> </linearGradient> <filter id="tsesm60vfa" width="135.3%" height="135.3%" x="-17.6%" y="-17.6%" filterUnits="objectBoundingBox">  <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur> </filter></defs><g fill="none" fill-rule="evenodd" transform="translate(-5 -4)"> <path fill="#005DE8" d="M41 6c18.778 0 34 15.222 34 34S59.778 74 41 74 7 58.778 7 40 22.222 6 41 6zm0 4c-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30 16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30z" filter="url(#tsesm60vfa)" opacity=".104"></path> <path stroke="#DADEE4" stroke-dasharray="2 3" d="M40.57 65.57c14.36 0 26-11.64 26-26s-11.64-26-26-26-26 11.64-26 26 11.64 26 26 26z"></path> <g fill-rule="nonzero" transform="translate(7 3.882)">  <ellipse cx="60.784" cy="26.341" fill="url(#flxcwa0nrb)" rx="1.623" ry="1.61" transform="rotate(9.539 60.784 26.341)"></ellipse>  <ellipse cx="60.737" cy="26.272" fill="url(#x6qp1zx4mc)" rx="4.543" ry="4.509" transform="rotate(9.539 60.737 26.272)"></ellipse>  <ellipse cx="21.557" cy="9.589" fill="url(#ql9rbb4acd)" rx="1.816" ry="1.802" transform="rotate(9.539 21.557 9.59)"></ellipse>  <ellipse cx="21.656" cy="9.727" fill="url(#c3seltdcje)" rx="5.084" ry="5.045" transform="rotate(9.539 21.656 9.727)"></ellipse>  <ellipse cx="15.516" cy="52.718" fill="url(#flxcwa0nrb)" rx="1.623" ry="1.61" transform="rotate(9.539 15.516 52.718)"></ellipse>  <ellipse cx="15.605" cy="52.841" fill="url(#x6qp1zx4mc)" rx="4.543" ry="4.509" transform="rotate(9.539 15.605 52.841)"></ellipse>  <ellipse cx="57.402" cy="2.334" fill="#04325A" rx="1.61" ry="1.614" transform="rotate(127.861 57.402 2.334)"></ellipse>  <ellipse cx="5.41" cy="7.216" fill="url(#s9eplprnxf)" rx="4.543" ry="4.509" transform="rotate(9.539 5.41 7.216)"></ellipse>  <ellipse cx="56.163" cy="69.265" fill="#FF6161" rx="2.163" ry="2.147" transform="rotate(9.539 56.164 69.265)"></ellipse> </g> <circle cx="41" cy="40" r="34" stroke="#0051FF" stroke-width=".5" opacity=".2"></circle> <path fill="#3A7AF3" d="M41.323 23c.546 0 .989.443.989.99v2.014c6.75.494 12.108 6.007 12.356 12.824h1.988c.546 0 .99.443.99.99 0 .546-.444.988-.99.988h-2.06c-.703 6.355-5.863 11.365-12.284 11.835v2.015c0 .546-.443.99-.99.99-.546 0-.989-.444-.989-.99V52.64c-6.421-.47-11.581-5.48-12.284-11.834h-2.06c-.546 0-.989-.443-.989-.99 0-.546.443-.989.99-.989h1.987c.248-6.817 5.605-12.33 12.356-12.824v-2.015c0-.546.443-.989.99-.989zm.988 6.592v2.311c0 .547-.442.99-.988.99-.547 0-.99-.443-.99-.99v-2.311c-4.775.48-8.537 4.394-8.778 9.236h2.348c.547 0 .99.443.99.99 0 .546-.443.988-.99.988h-2.249c.667 4.377 4.234 7.8 8.679 8.247v-2.311c0-.546.443-.99.99-.99.546 0 .989.444.989.99v2.311c4.445-.446 8.012-3.87 8.679-8.246h-2.25c-.545 0-.988-.443-.988-.99 0-.546.443-.989.989-.989h2.348c-.24-4.842-4.003-8.757-8.779-9.236z"></path></g></svg>
</fc-icon-svg>

Properties

Property Attribute Type Default Description
color color string choose color of the icon. example: gold
font font boolean if true should render as font
name name string choose color name from the font list. example: share
ratio ratio number 1 Height to width size ratio of icon.
Example: ratio = 2, means that width is x and height is 2x.
Example: ratio = 0.5, means that width is x and height is 0.5x.
size size "small" | "medium" | "large" | "huge" indicate the number of dots in the loading

CSS Custom Properties

Property Description
--fc-icon-svg-icon-color color. example: gold
--fc-icon-svg-icon-name name of the icon. example: var(--fc-icon-assign-user)
--fc-icon-svg-icon-size suze. example: 24px