Cet article traite de la création d'un composant icône avec RiotJS, en utilisant le CSS Material Design BeerCSS. Avant de commencer, assurez-vous d'avoir une application de base, ou lisez mes articles précédents de la série.

N'hésitez pas à consulter la documentation de RiotJS si nécessaire: https://riot.js.org/documentation/

Il existe trois types d'icônes sur BeerCSS : par défaut en utilisant les Glyphes Matériels de Google, en SVG, ou sous forme d'image (voir la capture d'écran suivante). L'objectif est de créer un composant d'icône Riot qui supporte les trois formats et écoute les événements de clic.

Icons from the BeerCSS documentation

Base du Composant Icône

Tout d'abord, créez un nouveau fichier nommé c-icon.riot dans le dossier des composants. Le c- signifie "composant", une convention de nommage utile et une bonne pratique.

Dans ./components/c-icon.riot, écrivez le code HTML suivant (trouvé dans la documentation BeerCSS) :

class="
        { props?.tiny ? ' tiny' : null}
        { props?.small ? ' small' : null}
        { props?.large ? ' large' : null}
        { props?.extra ? ' extra' : null}

        { props?.fill ? ' fill' : null}

        { props?.primary ? ' primary-text' : null}
        { props?.secondary ? ' secondary-text' : null}
        { props?.tertiary ? ' tertiary-text' : null}
    ">

Analysons le code :

  1. Les balises et définissent une balise racine personnalisée, portant le même nom que le fichier. Vous devez l'écrire ; sinon, cela pourrait créer des résultats inattendus. Utiliser la balise comme balise racine ou redéfinir les balises HTML natives est une mauvaise pratique, donc commencer par c- est un bon nommage.
  2. En utilisant la balise , vous pouvez injecter des modèles HTML personnalisés dans un composant enfant depuis son parent : maintenant, nous pouvons injecter soit une chaîne (pour une icône Google Material), une balise SVG, ou une balise image.
  3. Une icône BeerCSS supporte différentes tailles et classes de thème : chaque classe est appliquée conditionnellement si la prop correspondante existe. Les propriétés sont définies sur le nom d'attribut HTML.

Enfin, le composant c-icon.riot peut être instancié dans une page d'accueil index.riot:

style="width:600px;padding:20px;">
         style="margin-bottom:20px">Riot + BeerCSS

        check_circle
         large="true">
             viewBox="0 0 24 24">
                 d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z">
            
        
         extra="true">
               src="/favicon.png">
        
    
    
        import cIcon from "./components/c-icon.riot";

        export default {
            components: {
                cIcon
            }
        }

Analysons le code :

  1. Le composant est importé avec import cIcon from "./components/c-icon.riot"; puis chargé dans l'objet Riot components:{}.
  2. Dans le HTML, le composant d'icône est instancié avec nom_icône.
  3. Puisque le composant utilise un slot, différents types d'icônes peuvent être passés : sous forme de SVG ou d'image.
  4. Si l'icône provient des polices Google Material Fonts, et si le nom de l'icône contient un espace, remplacez chaque espace par un underscore. Par exemple, si le nom sur Google Font est "Chevron Right", vous devez écrire dans le slot : chevron_right.

Capture d'écran du HTML généré :
Image description

Pour appliquer différentes tailles et thèmes d'icônes, passez les attributs suivants à la définition de la balise du composant : tiny, small, large, extra, primary, secondary, tertiary, ou fill, comme ceci:

tiny="true">check_circle
 small="true">check_circle
check_circle
 large="true">check_circle
 extra="true">check_circle
 extra="true" fill="true">check_circle
 extra="true" fill="true" primary="true">check_circle
 extra="true" fill="true" secondary="true">check_circle
 extra="true" fill="true" tertiary="true">check_circle

Le HTML généré des variations d'icônes :

Icons variation of the Icon Component made with Riot

Test du Composant d'Icône

Il existe deux méthodes pour tester le composant d'icône, et elles sont couvertes dans deux articles différents :

Conclusion

Voilà 🎉 Nous avons créé un composant d'icône avec RiotJS en utilisant BeerCSS. Le code source de l'icône est disponible sur Github : https://github.com/steevepay/riot-beercss/blob/main/components/c-icon.riot

N'hésitez pas à commenter si vous avez des questions ou besoin d'aide concernant RiotJS.

Passez une excellente journée ! Santé 🍻