@identitate-md/logos

v1.3.34

Published

6 days ago

Logo-uri oficiale ale instituțiilor publice din Republica Moldova — Official logos of public institutions from the Republic of Moldova

0High
0Medium
0Low

zldr-md

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

@identitate-md/logos

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

📦 Instalare

npm install @identitate-md/logos

🚀 Utilizare

Via CDN (Recomandat)

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

URL-uri Simple (Recomandat)

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

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

<!-- Alte instituții -->
<img
  src="https://identitate.md/logos/guvernul-republicii-moldova/guvernul-republicii-moldova.svg"
  alt="Guvernul Republicii Moldova"
/>
<img src="https://identitate.md/logos/pnrr/pnrr.svg" alt="PNRR" />

jsDelivr (CDN Primară)

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

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

<!-- Versiunea latest (se actualizează automat) -->
<img
  src="https://cdn.jsdelivr.net/npm/@identitate-md/[email protected]/logos/guvernul-republicii-moldova/guvernul-republicii-moldova.svg"
  alt="Guvernul Republicii Moldova"
/>

unpkg (CDN Fallback)

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

Via npm Package

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

// În React, Vue, etc.
import logoPath from "@identitate-md/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-md/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-md/logos

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

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

Sau în HTML:

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

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

<identity-icon src="https://identitate.md/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-md/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.md/logos/guvernul-republicii-moldova/guvernul-republicii-moldova.svg"
      class="logo-guvern"
    >
    </identity-icon>
  </body>
</html>

React

// App.js sau index.js
import "@identitate-md/logos/loader";

function InstitutionLogo({ slug }) {
  return (
    <identity-icon
      src={`https://identitate.md/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-md/logos/loader";

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

<template>
  <identity-icon
    :src="`https://identitate.md/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-md/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-md/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-md/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-md/[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-md/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-md/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-md/logos/
├── logos/
│   ├── anaf/
│   │   ├── anaf.svg
│   │   └── simbol-anaf.svg
│   ├── guvernul-republicii-moldova/
│   │   ├── guvernul-republicii-moldova.svg
│   │   ├── guvernul-republicii-moldova-alb.svg
│   │   └── guvernul-republicii-moldova-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-md/logos@{version}/logos/{slug}/{filename}.svg

Exemple:

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

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

# Specific major version
https://cdn.jsdelivr.net/npm/@identitate-md/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-republicii-moldova — Guvernul Republicii Moldova
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ă IdentitateMD.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-md/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-md/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-md/logos/logos/${props.institution}/${props.institution}.svg`,
);
</script>

CSS Background

.anaf-logo {
  background-image: url("https://cdn.jsdelivr.net/npm/@identitate-md/[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-md/[email protected]/logos/anaf/anaf.svg"
/>

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

2. Optimizare Performanță

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

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

3. Fallback Strategy

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

4. Accesibilitate

<!-- ✅ Include întotdeauna alt text descriptiv -->
<img
  src="https://cdn.jsdelivr.net/npm/@identitate-md/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 IdentitateMD.

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

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

🔗 Link-uri Utile

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

📊 Stats

Made with ❤️ by IdentitateMD Contributors

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@identitate-md/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