Bootstrap Icons

Bootstrap Icons Configuración

Instalación Paso 1

npm i bootstrap-icons

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

Integración Paso 2

Opción 1: CSS

/* Importar en tu archivo CSS */
@import 'bootstrap-icons/font/bootstrap-icons.css';

Opción 2: JavaScript

// Importar en tu archivo JavaScript
import 'bootstrap-icons/font/bootstrap-icons.css';

Opción 3: HTML

<!DOCTYPE html>
<html>
<head>
  <!-- Usando CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

  <!-- O usando archivo local -->
  <link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
  <!-- Usando clases CSS -->
  <i class="bi bi-heart-fill"></i>

  <!-- Usando SVG -->
  <svg class="bi" width="32" height="32">
    <use xlink:href="#heart-fill"/>
  </svg>
</body>
</html>

Uso con Módulos

// Importar estilos
import 'bootstrap-icons/font/bootstrap-icons.css';

// Crear un icono dinámicamente
function createIcon(name, size = '1em') {
  const icon = document.createElement('i');
  icon.className = `bi bi-${name}`;
  icon.style.fontSize = size;
  return icon;
}

// Ejemplo de uso
const heartIcon = createIcon('heart-fill', '2em');
document.body.appendChild(heartIcon);

Métodos de Uso Paso 3

1. Fuente de Iconos

<i class="bi bi-alarm"></i>
<i class="bi bi-github"></i>
<i class="bi bi-calendar"></i>

2. SVG Individual

<!-- Copiar SVG directamente -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>

3. SVG Sprite

<!-- Incluir sprite -->
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="heart-fill" viewBox="0 0 16 16">
  <path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</symbol>
</svg>

<!-- Usar icono del sprite -->
<svg class="bi" width="16" height="16">
<use xlink:href="#heart-fill"/>
</svg>

JavaScript Vanilla

<!-- Usando clases CSS -->
<i class="bi bi-heart-fill text-danger"></i>

<!-- Usando el sprite SVG -->
<svg class="bi" width="32" height="32">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

Vue.js

<template>
  <i class="bi bi-heart-fill text-danger"></i>
</template>

<style>
@import 'bootstrap-icons/font/bootstrap-icons.css';
</style>

<script>
export function Icon({ name, size = '1em', className = '' }) {
  return (
    <i
      className={\`bi bi-\${name} \${className}\`}
      style={{ fontSize: size }}
    />
  )
}

// Uso
<Icon name="heart" size="2em" className="text-danger" />
</script>

Angular

// styles.css
@import 'bootstrap-icons/font/bootstrap-icons.css';

<i class="bi bi-heart-fill text-danger"></i>

Personalización Paso 5

CSS Custom Properties

.bi {
/* Tamaño */
font-size: 1.5rem;

/* Color */
color: var(--bs-primary);

/* Transiciones */
transition: color 0.3s ease;
}

.bi:hover {
color: var(--bs-primary-dark);
}

SCSS

.icon {
&-sm { font-size: 1rem; }
&-md { font-size: 1.5rem; }
&-lg { font-size: 2rem; }

&-primary { color: $primary; }
&-secondary { color: $secondary; }
}

Mejores Prácticas Recomendado

Accesibilidad

<!-- ✅ Bueno: Usar aria-label -->
<button class="btn" aria-label="Me gusta">
  <i class="bi bi-heart"></i>
</button>

<!-- ✅ Bueno: Usar aria-hidden con texto -->
<button class="btn">
  <i class="bi bi-heart" aria-hidden="true"></i>
  Me gusta
</button>

Rendimiento

<!-- ✅ Bueno: Usar SVG sprite para múltiples iconos -->
<svg class="bi" width="16" height="16">
  <use xlink:href="#icon-sprite"/>
</svg>

<!-- ❌ Malo: Cargar iconos individuales -->
<img src="path/to/icon.svg" alt="icono">

Organización

export const ICONS = {
SOCIAL: {
  GITHUB: 'github',
  TWITTER: 'twitter',
  LINKEDIN: 'linkedin'
},
ACTIONS: {
  EDIT: 'pencil-square',
  DELETE: 'trash',
  SAVE: 'save'
}
}

🐝