@identitate-ro/logos

v1.3.4

Published

10 days ago

Logo-uri oficiale ale instituțiilor publice din România — Official logos of Romanian public institutions

0High
0Medium
0Low

laurentiucotet

romania logos institutions government branding svg visual-identity public-sector

@identitate-ro/logos

Logo-uri oficiale ale instituțiilor publice din România — Official logos of Romanian public institutions

📦 Instalare

npm install @identitate-ro/logos

🚀 Utilizare

Via CDN (Recomandat)

Logo-urile sunt disponibile automat prin CDN-uri gratuite:

URL-uri Simple (Recomandat)

<!-- Logo complet -->
<img src="https://identitate.eu/logos/anaf/anaf.svg" alt="ANAF">

<!-- Simbol -->
<img src="https://identitate.eu/logos/anaf/simbol-anaf.svg" alt="ANAF Simbol">

<!-- Alte instituții -->
<img src="https://identitate.eu/logos/guvernul-romaniei/guvernul-romaniei.svg" alt="Guvernul României">
<img src="https://identitate.eu/logos/pnrr/pnrr.svg" alt="PNRR">

jsDelivr (CDN Primară)

<!-- Logo complet -->
<img src="https://cdn.jsdelivr.net/npm/@identitate-ro/[email protected]/logos/anaf/anaf.svg" alt="ANAF">

<!-- Simbol -->
<img src="https://cdn.jsdelivr.net/npm/@identitate-ro/[email protected]/logos/anaf/simbol-anaf.svg" alt="ANAF Simbol">

<!-- Versiunea latest (se actualizează automat) -->
<img src="https://cdn.jsdelivr.net/npm/@identitate-ro/[email protected]/logos/guvernul-romaniei/guvernul-romaniei.svg" alt="Guvernul României">

unpkg (CDN Fallback)

<img src="https://unpkg.com/@identitate-ro/[email protected]/logos/pnrr/pnrr.svg" alt="PNRR">

Via npm Package

După instalare, logo-urile sunt disponibile în node_modules/@identitate-ro/logos/logos/:

// În React, Vue, etc.
import logoPath from '@identitate-ro/logos/logos/anaf/anaf.svg';

function MyComponent() {
  return <img src={logoPath} alt="ANAF" />;
}

// În Node.js
import { readFileSync } from 'fs';
import { join } from 'path';

const logoPath = join(
  process.cwd(), 
  'node_modules/@identitate-ro/logos/logos/anaf/anaf.svg'
);
const logoContent = readFileSync(logoPath, 'utf8');

🎯 Web Component (Recomandat pentru Aplicații Moderne)

Metoda profesională, framework-agnostic — funcționează cu React, Vue, Angular, vanilla HTML, WordPress, etc.

Cum funcționează?

Web Component-ul <identity-icon> este un element HTML custom care:

✅ Descarcă automat SVG-ul din CDN
✅ Include caching inteligent (descarcă o singură dată)
✅ Permite stilizare CSS (color, width, height, etc.)
✅ Gestionează automat erorile și loading states
✅ Este complet agnostic de framework

Instalare și Setup

Pas 1: Instalează pachetul

npm install @identitate-ro/logos

Pas 2: Importă loader-ul (o singură dată în aplicație)

// În index.js, main.js, App.js, etc.
import '@identitate-ro/logos/loader';

Sau în HTML:

<script src="https://cdn.jsdelivr.net/npm/@identitate-ro/logos/identity-loader.js"></script>

Pas 3: Folosește tag-ul <identity-icon>

<identity-icon 
  src="https://identitate.eu/logos/anaf/anaf.svg">
</identity-icon>

Exemple Complete

Vanilla HTML

<!DOCTYPE html>
<html>
<head>
  <title>Logo Instituții</title>
  <script src="https://cdn.jsdelivr.net/npm/@identitate-ro/logos/identity-loader.js"></script>
  <style>
    .logo-guvern {
      width: 64px;
      height: 64px;
      color: #003399; /* Albastru */
      transition: color 0.3s;
    }
    
    .logo-guvern:hover {
      color: #ffcc00; /* Galben la hover */
      filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
    }
  </style>
</head>
<body>
  <identity-icon 
    src="https://identitate.eu/logos/guvernul-romaniei/guvernul-romaniei.svg" 
    class="logo-guvern">
  </identity-icon>
</body>
</html>

React

// App.js sau index.js
import '@identitate-ro/logos/loader';

function InstitutionLogo({ slug }) {
  return (
    <identity-icon 
      src={`https://identitate.eu/logos/${slug}/${slug}.svg`}
      className="w-16 h-16 text-blue-600"
    />
  );
}

// Folosire
<InstitutionLogo slug="anaf" />

Vue

<script setup>
// În main.js sau App.vue
import '@identitate-ro/logos/loader';

const props = defineProps(['institution']);
</script>

<template>
  <identity-icon 
    :src="`https://identitate.eu/logos/${institution}/${institution}.svg`"
    class="logo-icon"
  />
</template>

<style scoped>
.logo-icon {
  width: 64px;
  height: 64px;
  color: currentColor;
}
</style>

Angular

// app.component.ts
import '@identitate-ro/logos/loader';

@Component({
  selector: 'app-institution-logo',
  template: `
    <identity-icon 
      [attr.src]="logoUrl"
      class="institution-logo">
    </identity-icon>
  `,
  styles: [`
    .institution-logo {
      width: 64px;
      height: 64px;
      color: #003399;
    }
  `]
})
export class InstitutionLogoComponent {
  @Input() slug!: string;
  
  get logoUrl() {
    return `https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/${this.slug}/${this.slug}.svg`;
  }
}

WordPress

<!-- functions.php -->
<?php
function enqueue_identity_loader() {
    wp_enqueue_script(
        'identity-loader',
        'https://cdn.jsdelivr.net/npm/@identitate-ro/logos/identity-loader.js',
        array(),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_identity_loader');
?>

<!-- În template (page.php, single.php, etc.) -->
<identity-icon 
  src="https://cdn.jsdelivr.net/npm/@identitate-ro/[email protected]/logos/primaria-cluj-napoca/primaria-cluj-napoca.svg"
  style="width: 100px; height: 100px; color: #2c5aa0;">
</identity-icon>

Stilizare CSS

Web Component-ul respectă complet CSS-ul:

/* Dimensiuni */
identity-icon {
  width: 64px;
  height: 64px;
}

/* Culoare (fill: currentColor activat automat) */
identity-icon {
  color: #003399;
}

identity-icon:hover {
  color: #ffcc00;
}

/* Efecte */
identity-icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
  identity-icon {
    width: 48px;
    height: 48px;
  }
}

Atribute Suportate

src (obligatoriu) — URL-ul către logo-ul SVG
size (opțional) — Shortcut pentru width/height (ex: size="64px")

<!-- Cu size attribute -->
<identity-icon 
  src="https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/anaf/anaf.svg"
  size="128px">
</identity-icon>

Avantaje Web Component

Semantic HTML: <identity-icon> comunică clar ce face
Caching inteligent: Descarcă fiecare SVG o singură dată, chiar dacă îl folosești în 100 de locuri
Stilizare ușoară: Folosește CSS normal (color, width, height, etc.)
Framework-agnostic: Funcționează oriunde rulează JavaScript
Loading states: Gestionează automat stările de loading și eroare
Security: Sanitizare automată a SVG-urilor (remove script tags)

Metadata

Pachetul include index.json cu metadata despre toate logo-urile:

import metadata from '@identitate-ro/logos/index.json';

console.log(metadata.institutions);
// [
//   {
//     "id": "ro-anaf",
//     "slug": "anaf",
//     "name": "Agenția Națională de Administrare Fiscală",
//     "logos": {
//       "horizontal": {
//         "color": "/logos/anaf/anaf.svg"
//       },
//       "symbol": {
//         "color": "/logos/anaf/simbol-anaf.svg"
//       }
//     }
//   },
//   ...
// ]

📁 Structură

@identitate-ro/logos/
├── logos/
│   ├── anaf/
│   │   ├── anaf.svg
│   │   └── simbol-anaf.svg
│   ├── guvernul-romaniei/
│   │   ├── guvernul-romaniei.svg
│   │   ├── guvernul-romaniei-alb.svg
│   │   └── guvernul-romaniei-mono.svg
│   ├── ministerul-educatiei/
│   ├── pnrr/
│   ├── primaria-cluj-napoca/
│   └── ...
├── index.json (metadata)
└── README.md

🎨 Formate Disponibile

Pentru fiecare instituție, logo-urile sunt disponibile în mai multe variante:

Color — Versiunea color completă (recomandată)
Dark Mode — Optimizată pentru fundal întunecat
White — Pentru fundal întunecat (versiune albă)
Black — Pentru fundal deschis (versiune neagră)
Monochrome — Versiune monocromă

Layout-uri

Horizontal — Logo complet orizontal (cel mai comun)
Vertical — Logo complet vertical
Symbol — Doar simbolul/iconița (fără text)

🔗 CDN URLs Pattern

https://cdn.jsdelivr.net/npm/@identitate-ro/logos@{version}/logos/{slug}/{filename}.svg

Exemple:

# Versiune specifică (recomandată pentru producție)
https://cdn.jsdelivr.net/npm/@identitate-ro/[email protected]/logos/anaf/anaf.svg

# Latest version (se actualizează automat)
https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/anaf/anaf.svg

# Specific major version
https://cdn.jsdelivr.net/npm/@identitate-ro/logos@1/logos/anaf/anaf.svg

📋 Lista Instituțiilor

Instituțiile disponibile în v1.0.0:

anaf — Agenția Națională de Administrare Fiscală
guvernul-romaniei — Guvernul României
ministerul-educatiei — Ministerul Educației
pnrr — Plan Național de Redresare și Reziliență
primaria-cluj-napoca — Primăria Cluj-Napoca

Pentru lista completă și actualizată, consultă identitatero.vercel.app.

💡 Exemple de Utilizare

HTML Simplu

<!DOCTYPE html>
<html>
<head>
  <title>Logo-uri Instituții</title>
</head>
<body>
  <img 
    src="https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/anaf/anaf.svg" 
    alt="ANAF"
    width="200"
  >
</body>
</html>

React/Next.js

export default function InstitutionLogo({ slug, variant = 'color' }) {
  const cdnUrl = `https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/${slug}/${slug}.svg`;
  
  return (
    <img 
      src={cdnUrl}
      alt={slug}
      loading="lazy"
    />
  );
}

Vue

<template>
  <img 
    :src="logoUrl" 
    :alt="institution"
    loading="lazy"
  />
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps(['institution', 'variant']);

const logoUrl = computed(() => 
  `https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/${props.institution}/${props.institution}.svg`
);
</script>

CSS Background

.anaf-logo {
  background-image: url('https://cdn.jsdelivr.net/npm/@identitate-ro/[email protected]/logos/anaf/anaf.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px;
  height: 100px;
}

🎯 Best Practices

1. Folosește Versiuni Specifice în Producție

<!-- ✅ Bine - versiune fixată -->
<img src="https://cdn.jsdelivr.net/npm/@identitate-ro/[email protected]/logos/anaf/anaf.svg">

<!-- ⚠️ Evită în producție - poate schimba -->
<img src="https://cdn.jsdelivr.net/npm/@identitate-ro/[email protected]/logos/anaf/anaf.svg">

2. Optimizare Performanță

<!-- Lazy loading -->
<img 
  src="https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/anaf/anaf.svg"
  loading="lazy"
  alt="ANAF"
>

<!-- Preload pentru logo-uri critice -->
<link 
  rel="preload" 
  href="https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/guvernul-romaniei/guvernul-romaniei.svg"
  as="image"
>

3. Fallback Strategy

<img 
  src="https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/anaf/anaf.svg"
  onerror="this.src='https://unpkg.com/@identitate-ro/logos/logos/anaf/anaf.svg'"
  alt="ANAF"
>

4. Accesibilitate

<!-- ✅ Include întotdeauna alt text descriptiv -->
<img 
  src="https://cdn.jsdelivr.net/npm/@identitate-ro/logos/logos/anaf/anaf.svg"
  alt="Logo Agenția Națională de Administrare Fiscală"
  role="img"
>

📄 Licență

MIT License - vezi LICENSE pentru detalii.

Toate logo-urile sunt proprietatea instituțiilor respective și sunt disponibile în scopuri informative și de utilizare legală conform ghidurilor de identitate vizuală ale fiecărei instituții.

🤝 Contribuții

Acest pachet face parte din proiectul IdentitateRO.

Pentru a adăuga logo-uri noi sau pentru a raporta probleme:

Vizitează github.com/laurentiucotet/IdentitateRO
Consultă CONTRIBUTING.md
Deschide un Pull Request sau Issue

🔗 Link-uri Utile

Website: identitatero.vercel.app
Documentație: identitatero.vercel.app/utilizare
GitHub: github.com/laurentiucotet/IdentitateRO
npm Package: @identitate-ro/logos
jsDelivr CDN: cdn.jsdelivr.net/npm/@identitate-ro/logos
unpkg CDN: unpkg.com/@identitate-ro/logos

📊 Stats

Made with ❤️ by IdentitateRO Contributors

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@identitate-ro/logos

📦 Instalare

🚀 Utilizare

Via CDN (Recomandat)

URL-uri Simple (Recomandat)

jsDelivr (CDN Primară)

unpkg (CDN Fallback)

Via npm Package

🎯 Web Component (Recomandat pentru Aplicații Moderne)

Cum funcționează?

Instalare și Setup

Exemple Complete

Vanilla HTML

React

Vue

Angular

WordPress

Stilizare CSS

Atribute Suportate

Avantaje Web Component

Metadata

📁 Structură

🎨 Formate Disponibile

Layout-uri

🔗 CDN URLs Pattern

📋 Lista Instituțiilor

💡 Exemple de Utilizare

HTML Simplu

React/Next.js

Vue

CSS Background

🎯 Best Practices

1. Folosește Versiuni Specifice în Producție

2. Optimizare Performanță

3. Fallback Strategy

4. Accesibilitate

📄 Licență

🤝 Contribuții

🔗 Link-uri Utile

📊 Stats