@maggioli-design-system/identity contiene gli artwork di questa sezione come file, senza codice e senza dipendenze. Installarlo tiene i loghi di un progetto allineati al brand tramite npm, invece di file copiati a mano che nessuno aggiorna.

Installazione

npm install @maggioli-design-system/identity

Il pacchetto non ha una mappa exports: qualsiasi file della sua cartella dist/ si importa con il suo percorso.

File

Ogni artwork è un file SVG, con gli altri formati accanto, nella stessa cartella e con lo stesso nome: <nome>.svgL’artwork, vettoriale<nome>.pdfLo stesso artwork su una pagina PDF<nome>-256w.png, <nome>-512w.png, <nome>-1024w.pngVersioni PNG, per larghezza in pixel<nome>-256w.webp, <nome>-512w.webp, <nome>-1024w.webpVersioni WebP, per larghezza in pixel Il nome indica la variante. Nessun suffisso è la versione a colori; -black e -white sono quelle a un colore, e alcuni brand interni hanno -blue, -gold o -dark-gold. -no-text e -icon indicano il simbolo, il logo senza il nome, e -bordered il logo del Gruppo con un bordo intorno. dist/identity.json dice lo stesso senza leggere i nomi: una voce per famiglia di artwork, con il nome del brand come lo scrive l’artwork, il suo proprietario e la sua linea di prodotti, e per ogni variante la forma, il colore, lo sfondo per cui è disegnata e le dimensioni. dist/directory-tree.json elenca tutti i file del pacchetto. Nelle pagine di questa sezione, il menu Scarica di una card copia il percorso del suo file nel pacchetto, pronto da importare: @maggioli-design-system/identity/dist/brand/gruppo-maggioli/logo-gruppo-maggioli.svg.

Con Vite

In un progetto Vite, vanilla o React, importa il file: Vite lo copia nella build e restituisce il suo URL.

src/main.js

import logo from '@maggioli-design-system/identity/dist/brand/gruppo-maggioli/logo-gruppo-maggioli.svg';

document.querySelector('#logo').src = logo;

src/Logo.jsx

import logo from '@maggioli-design-system/identity/dist/brand/gruppo-maggioli/logo-gruppo-maggioli.svg';

export function Logo() {
  return <img src={logo} alt="Gruppo Maggioli" height="48" />;
}

In TypeScript, i tipi vite/client di un progetto Vite dichiarano questi import. Vite scrive i file sotto i 4 kB nel bundle, come data URL, invece di copiarli.

Con Angular

Angular copia file da node_modules nella build con l’opzione assets di angular.json; i template puntano poi alla copia:

angular.json

"assets": [
  { "glob": "**/*", "input": "public" },
  {
    "glob": "**/*.svg",
    "input": "node_modules/@maggioli-design-system/identity/dist/brand/gruppo-maggioli",
    "output": "identity"
  }
]

<img src="identity/logo-gruppo-maggioli.svg" alt="Gruppo Maggioli" height="48" />

Qualsiasi altro progetto

Copia i file che servono al progetto al momento dell’installazione, con uno script che parte dopo npm install. Lo script trova il pacchetto ovunque npm lo metta:

scripts/copy-identity.mjs

import { cpSync } from 'node:fs';
import { fileURLToPath } from 'node:url';

const dist = fileURLToPath(import.meta.resolve('@maggioli-design-system/identity/dist/'));

cpSync(`${dist}brand/gruppo-maggioli`, 'public/identity', {
  recursive: true,
  filter: (file) => !/\.(pdf|webp)$/.test(file),
});

package.json

"scripts": {
  "postinstall": "node scripts/copy-identity.mjs"
}

Testo alternativo

Un logo da solo, come il link alla home page, ha il nome del brand come testo alternativo: alt="Gruppo Maggioli". Un logo accanto al nome scritto come testo lo ripete, ed è decorazione: alt="".

Non ancora nel pacchetto

Le descrizioni e le regole d’uso, come l’area di rispetto, la dimensione minima e gli sfondi di ogni brand: arriveranno dalle linee guida del brand. Le descrizioni di questa sezione sono valori di default di questo sito.