@inkline/inkline/components/IIcon/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Icon
 */
.inkline-icon {
  height: var(--icon--size);
}

/**
 * Size variants
 */
.inkline-icon.-xs {
  --icon--size: var(--icon--xs--size, calc(var(--font-size) * var(--size-multiplier-xs)));
}
.inkline-icon.-sm {
  --icon--size: var(--icon--sm--size, calc(var(--font-size) * var(--size-multiplier-sm)));
}
.inkline-icon.-md {
  --icon--size: var(--icon--md--size, calc(var(--font-size) * var(--size-multiplier-md)));
}
.inkline-icon.-lg {
  --icon--size: var(--icon--lg--size, calc(var(--font-size) * var(--size-multiplier-lg)));
}
.inkline-icon.-xl {
  --icon--size: var(--icon--xl--size, calc(var(--font-size) * var(--size-multiplier-xl)));
}
.inkline-icon.-xxl {
  --icon--size: var(--icon--2xl--size, calc(var(--font-size) * var(--size-multiplier-2xl)));
}