Integração
Exemplos prontos para levar os ícones ao seu projeto, do HTML puro a componentes em React e Vue.
HTML
html
<img src="https://glassius.himersus.com/api/icons/escudo?c1=0A3CFF&size=32" width="32" height="32" alt="Segurança"/>CSS
css
.botao-seguro::before { content: ""; display: inline-block; width: 24px; height: 24px; background: url("https://glassius.himersus.com/api/icons/escudo?c1=0A3CFF") center / contain no-repeat;}React
Um componente pequeno resolve. Funciona em React, Next.js, Remix e Vite.
GlassIcon.tsx
type Props = { name: string; color?: string; size?: number; label?: string;}; export function GlassIcon({ name, color = "0A3CFF", size = 32, label = "" }: Props) { const src = `https://glassius.himersus.com/api/icons/${name}?c1=${color}&size=${size}`; return <img src={src} width={size} height={size} alt={label} />;} // uso<GlassIcon name="pasta" color="FF6A13" size={40} label="Pasta" />Next.js
Prefira
<img> ao componente next/image: ele bloqueia SVG remoto por padrão e não ganha nada otimizando um arquivo vetorial.Vue
GlassIcon.vue
<script setup>const props = defineProps({ name: String, color: { default: "0A3CFF" }, size: { default: 32 } })</script> <template> <img :src="`https://glassius.himersus.com/api/icons/${props.name}?c1=${props.color}&size=${props.size}`" :width="props.size" :height="props.size" alt="" /></template>Markdown e README
markdown
SVG inline
Para inserir o código SVG direto no HTML, e animar ou mudar camadas com CSS, busque o arquivo com fetch. Isso funciona no próprio domínio do Glassius. Outros domínios ainda não recebem os cabeçalhos CORS; veja Cache e limites.
javascript
const svg = await fetch("/api/icons/pasta?size=48").then((r) => r.text());document.querySelector("#icone").innerHTML = svg;