Uso

Instalación

Instala el paquete con el gestor de paquetes de tu proyecto:

Yarn

yarn add @omnicajs/icons

npm

npm install @omnicajs/icons

pnpm

pnpm add @omnicajs/icons

Elige una capa de distribución

Usa el punto de entrada raíz cuando la aplicación necesite el catálogo completo y elija una variante en tiempo de ejecución:

import { iconUrl } from '@omnicajs/icons'

const href = iconUrl('filled', 'actions', 'add')
const outlinedHref = iconUrl('outlined', 'actions', 'add-circle')

Usa el punto de entrada de una variante para obtener una variante completa:

import { iconUrl } from '@omnicajs/icons/filled'

const href = iconUrl('actions', 'add')

Usa el punto de entrada de un grupo para obtener un sprite prediseñado más pequeño:

import { iconUrl } from '@omnicajs/icons/filled/actions'

const href = iconUrl('add')

Cada helper devuelve la URL de un símbolo SVG externo:

<svg width="24" height="24" aria-hidden="true">
    <use :href="href" />
</svg>

Las formas completa y por grupo terminan en #actions/add. Solo cambia el archivo del sprite. La variante de contorno tiene su propio mapa de nombres, más pequeño, y nunca recurre a la variante de relleno.

Recursos a todo color y archivos fuente

Las banderas y los logotipos conservan los colores originales:

import { iconUrl as flagUrl } from '@omnicajs/icons/flags'
import { iconUrl as logoUrl } from '@omnicajs/icons/logos'

Los archivos fuente siguen disponibles para los pipelines de los consumidores:

import addUrl from '@omnicajs/icons/assets/icons/filled/actions/add.svg?url'

Componentes Vue basados en importaciones

Con el plugin opcional para Vite, Webpack o Rspack, una importación SVG monocroma sin query se convierte en un componente Vue. La compilación de producción combina solo los símbolos importados en un sprite con hash de contenido; ?url conserva el comportamiento de recurso original.

filled/actions/clear-circle

<script setup lang="ts">
import IconClearCircle from '@omnicajs/icons/assets/icons/filled/actions/clear-circle.svg'
</script>

<template>
    <IconClearCircle width="24" height="24" aria-hidden="true" />
</template>

El README del paquete contiene las configuraciones completas del bundler y TypeScript.

Subconjunto personalizado

Para crear un sprite más pequeño con iconos de varios grupos, configura la CLI o el adaptador del bundler:

import { defineConfig } from '@omnicajs/icons/build'

export default defineConfig({
    include: {
        filled: {
            actions: ['add', 'remove'],
            alerts: ['warning'],
        },
    },
})

omnica-icons build --config omnica-icons.config.mjs

El módulo TypeScript generado referencia el SVG adyacente mediante new URL(..., import.meta.url). Vite o Webpack copia después el recurso y añade un hash de contenido.

Los adaptadores oficiales están disponibles como @omnicajs/icons/vite y @omnicajs/icons/webpack; ambos exponen el subconjunto seleccionado como virtual:omnicajs-icons y pueden generar un archivo de declaraciones exacto. Consulta el README del paquete para ver las configuraciones completas.

Invalidación de caché

En producción, deja que el bundler genere una URL del sprite con hash de contenido:

/assets/filled.616dce3a.svg#actions/add

El fragmento no forma parte de la petición HTTP. Si sirves directamente un sprite con una URL estable, coloca una clave de compilación determinista antes del fragmento:

/icons/filled.svg?v=<build-id>#actions/add

El catálogo usa esta técnica de parámetros de consulta solo durante el desarrollo. Los helpers publicados no añaden marcas de tiempo ni otros efectos secundarios en producción.