@forter/icons

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

<!-- color -->
<fc-icon-svg name="fingerprint" style="--fc-icon-svg-icon-color:var(--fc-gold-500);" color="true">
</fc-icon-svg>

Properties

Property	Attribute	Type	Default	Description
color	color	boolean		if true should render as color of svg set with --fc-icon-svg-icon-color
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: var(--fc-indigo-500)
--fc-icon-svg-icon-name	name of the icon. example: var(--fc-icon-assign-user)
--fc-icon-svg-icon-size	size. example: 24px