@dnb/eufemia/components/icon/style/dnb-icon.css

DNB Eufemia Design System UI Library

/*
* Icon component
*
*/
/*
 * Utilities
 */
.dnb-icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  line-height: 1rem;
  color: inherit;
  width: 1em;
  height: 1em;
}
.dnb-icon img, :where(.dnb-core-style) .dnb-icon img,
.dnb-icon svg,
:where(.dnb-core-style) .dnb-icon svg {
  width: inherit;
  height: inherit;
  shape-rendering: geometricprecision;
  vertical-align: top;
}
.dnb-icon svg[width="100%"] {
  width: inherit;
}
.dnb-icon svg[height="100%"] {
  height: inherit;
}
.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] {
  fill: currentcolor;
}
.dnb-icon--inherit-color svg [stroke] {
  stroke: currentcolor;
}
.dnb-icon--small {
  font-size: 0.75rem;
}
.dnb-icon--default {
  font-size: 1rem;
}
.dnb-icon--medium {
  font-size: 1.5rem;
}
.dnb-icon--large {
  font-size: 2rem;
}
.dnb-icon--x-large {
  font-size: 2.5rem;
}
.dnb-icon--xx-large {
  font-size: 3rem;
}
.dnb-icon--custom-size {
  width: auto;
  height: auto;
  line-height: 0;
}
.dnb-icon--auto {
  font-size: 1em;
}
.dnb-icon--custom-size svg[width="24"] path, .dnb-icon--auto svg[width="24"] path, .dnb-icon--large svg[width="24"] path, .dnb-icon--x-large svg[width="24"] path, .dnb-icon--xx-large svg[width="24"] path {
  vector-effect: non-scaling-stroke;
}
.dnb-icon--auto > .dnb-icon--wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
  vertical-align: middle;
}
p > .dnb-icon {
  vertical-align: inherit;
}
.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after {
  content: none !important;
}
.dnb-icon.dnb-skeleton {
  color: var(--skeleton-color) !important;
}