Générez facilement de superbes avatars dégradés

Salut tout le monde, Simplr ici !

Nous sommes de retour avec un autre projet open source que nous sommes incroyablement ravis de partager avec vous tous. Cette fois, c'est une question d'identité visuelle et de représentation des utilisateurs : @simplr-sh/avatar. Si vous recherchez un moyen simple et élégant de générer de superbes avatars basés sur des dégradés pour vos applications Web, vous êtes au bon endroit.

Dans le monde du développement Web, la cohérence visuelle et les expériences utilisateur personnalisées sont primordiales. Et un élément clé de cela est l’avatar de l’utilisateur. Mais soyons honnêtes, gérer la génération d’avatars peut parfois s’avérer fastidieux. Vous devez penser aux espaces réservés, au style et à la logique backend potentiellement complexe. C'est pourquoi nous avons décidé de créer @simplr-sh/avatar, une bibliothèque TypeScript qui rend le processus transparent et agréable.

Pourquoi nous avons créé @simplr-sh/avatar

L'inspiration pour ce projet est venue du désir de disposer d'un moyen simple, mais élégant, de générer des avatars sans avoir besoin de téléchargements d'images ou d'API complexes. Nous voulions quelque chose de performant, personnalisable et tout simplement bien. Le travail incroyable de l'équipe Vercel dans leur composant avatar a eu une grande influence, et nous voulions proposer une solution similaire, mais axée spécifiquement sur les avatars basés sur des dégradés avec superpositions de texte.

Qu'est-ce qui distingue @simplr-sh/avatar ?

@simplr-sh/avatar est une bibliothèque unique conçue pour vous aider à générer rapidement de superbes avatars basés sur des dégradés. Décomposons les principales fonctionnalités :

• Avatars basés sur les dégradés : La fonctionnalité principale de cette bibliothèque. @simplr-sh/avatar génère des arrière-plans dégradés uniques pour chaque avatar en fonction du nom fourni. Cela signifie qu'il n'y aura pas deux avatars exactement identiques, ajoutant une touche de personnalité à votre application.
• Superpositions de texte personnalisables : Affichez les initiales de l'utilisateur ou tout autre texte de votre choix sur le fond dégradé. Cela vous donne encore plus de flexibilité dans la manière dont vous souhaitez représenter vos utilisateurs.
• Personnalisation facile : Vous pouvez personnaliser l'apparence de vos avatars grâce à des options simples telles que la taille et l'arrondi (rayon de la bordure).
• Prise en charge de TypeScript : L'intégralité de la bibliothèque est écrite en TypeScript, vous offrant une sécurité de frappe et une expérience de développement fluide.
• URI de données SVG Base64 : La bibliothèque renvoie l'avatar généré sous forme d'URI de données SVG Base64. C’est génial car vous n’avez pas à vous soucier du stockage des images sur un serveur ou de gérer des requêtes réseau supplémentaires. L'avatar est prêt à être affiché directement dans une balise HTML img.

Exploration approfondie de l'API : getAvatar(options)

Le cœur de @simplr-sh/avatar est la fonction getAvatar(options). Cette fonction est chargée de générer l’avatar et elle est incroyablement simple à utiliser. Voici un aperçu rapide des options qu’il accepte :

• name (string): Le nom de l'utilisateur utilisé pour générer l'arrière-plan dégradé.
• text (string): Le texte à superposer au-dessus du dégradé (par exemple, les initiales).
• taille (nombre, facultatif) : La taille de l'avatar en pixels. La valeur par défaut est 128.
• arrondi (nombre, facultatif) : Le rayon de la bordure de l'avatar, vous permettant de créer des avatars circulaires, arrondis ou carrés. La valeur par défaut est 0.

La fonction renvoie une promesse qui se résout en une chaîne qui est l'URI des données SVG Base64 de l'avatar généré.

Comment utiliser @simplr-sh/avatar

Voyons comment utiliser @simplr-sh/avatar dans les environnements Vanilla JavaScript et React :

Exemple JavaScript vanille

import { getAvatar } from '@simplr-sh/avatar';

(async () => {
  // Generate a simple avatar
  const avatar = await getAvatar({
    name: 'John Doe',
    text: 'JD',
    size: 128,
    rounded: 16,
  });

  // Use in HTML
  const img = document.createElement('img');
  img.src = avatar;
  document.body.appendChild(img);
})();

Exemple de réaction

import { useEffect, useState } from 'react';
import { getAvatar } from '@simplr-sh/avatar';

function Avatar({ name, text, size = 128, rounded = 16 }) {
  const [avatarSrc, setAvatarSrc] = useState<string>('');

  useEffect(() => {
    getAvatar({ name, text, size, rounded })
      .then(setAvatarSrc)
      .catch(console.error);
  }, [name, text, size, rounded]);

  return <img src={avatarSrc} alt={`Avatar for ${name}`} />;
}

// Usage
function App() {
  return <Avatar name="John Doe" text="JD" />;
}

Attribution et Open Source

Ce package est inspiré et contient du code adapté du travail incroyable réalisé dans le référentiel Avatar de Vercel. Nous leur sommes extrêmement reconnaissants pour leurs contributions à la communauté du développement Web.

Ce projet est entièrement open source et nous vous encourageons à vous impliquer. Si vous trouvez un bug, avez une demande de fonctionnalité ou souhaitez contribuer au code, n'hésitez pas à consulter le référentiel à l'adresse : https://github.com/simplr-sh/avatar

Démarrage

Prêt à essayer @simplr-sh/avatar ? Voici comment l'installer :

# Using bun
bun i @simplr-sh/avatar

# Using NPM
npm i @simplr-sh/avatar

# Using Yarn
yarn add @simplr-sh/avatar

Conclusion

@simplr-sh/avatar est une bibliothèque simple mais puissante que nous avons créée pour rendre l'ajout d'avatars élégants aussi simple que possible. Nous avons consacré beaucoup d'efforts et d'amour à ce projet, et nous espérons qu'il vous aidera à créer des applications Web encore plus belles et attrayantes.

Nous sommes toujours ouverts aux commentaires et aux suggestions. Faites-nous savoir dans les commentaires ci-dessous ce que vous en pensez ou si vous avez des questions !

#opensource #react #npm #avatars #webdev #ui #javascript #typescript #developers #componentlibrary

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!