Discourse Facile 'SVG Icon' et 'Emoji' dans CSS

Bonjour

Ce sujet contient deux composants de thème.

Discourse Easy SVG Icon CSS

Ce composant de thème est fonctionnel en tant que modèle, veuillez le forker sur Github ou utiliser le code dans votre projet. Vous pouvez supprimer les codes svg des icônes du SCSS et ne conserver que ceux que vous utilisez réellement… J’ai importé le fichier mixin dans le fichier common.scss afin que vous puissiez ajouter votre code sous cette ligne ou séparément dans la section bureau ou mobile.

Le composant de thème ajoute la capacité de garder l’icône SVG maintenable et facilement modifiable dans votre CSS. Le composant contient toutes les icônes svg trouvées ici : discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub

Comment l’utiliser ?

Paramètres fixes :

$icon-set : marques, régulier, solide
$icon-name : nom de l’icône
$icon-color : couleur de l’icône (currentColor, hexadécimal ou variable de couleur)
$width et $height : la taille de l’icône ajoutée

Cela ressemble à ceci :

@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);

Utilisation de currentColor
Voici un exemple pour ajouter une icône de fusée solide avant l’élément de navigation Latest.

#navigation-bar {
  li.nav-item {
    &_latest {
      a {      
        gap: 0.5em;
        &:before {
          content: "";
          @include svg-icon(solid, rocket, currentColor, 1em, 1em);
        }
      }
    }
  }
}

Utilisation de la variable de couleur var(--gold)
Voici un exemple pour ajouter une icône d’étoile dorée régulière avant l’élément de navigation Top.

#navigation-bar {
  li.nav-item {
    &_top {
      a {      
        gap: 0.5em;
        &:before {
          content: "";
          @include svg-icon(regular, star, var(--gold), 1em, 1em);
        }
      }
    }
  }
}

Nous pouvons facilement changer l’ensemble d’icônes, la couleur ou même l’icône au survol, etc… Voyons voir !

Maintenant, nous changeons l’icône régulière en solide lorsque je survole le bouton.

#navigation-bar {
  li.nav-item {
    &_top {
      a {      
        gap: 0.5em;
        &:hover,
        &:focus,
        &.active {
          &:before {
            @include svg-icon(solid, star, currentColor, 1em, 1em);
          }
        }
        &:before {
          content: "";
          @include svg-icon(regular, star, currentColor, 1em, 1em);
        }
      }
    }
  }
}

Discourse Easy Emoji CSS

Ce composant de thème est fonctionnel en tant que modèle, veuillez le forker sur Github ou utiliser le code dans votre projet. J’ai importé le fichier mixin dans le fichier common.scss afin que vous puissiez ajouter votre code sous cette ligne ou séparément dans la section bureau ou mobile.

Comment l’utiliser ?

L’utilisation est similaire à la version SVG.

Paramètres fixes :

$emoji-set : apple, google, twitter, win10, google_classic, facebook_messenger
$emoji-name : nom de l’emoji
$width et $height : la taille de l’emoji ajouté

@include emoji($emoji-set, $emoji-name, $width, $height);

Voici un exemple pour ajouter un emoji rocket facebook_messenger avant l’élément de navigation Latest et un emoji star twitter avant l’élément de navigation Top.

#navigation-bar {
  li.nav-item {
    &_latest {
      a {      
        gap: 0.5em;
        &:before {
          content: "";
          @include emoji(facebook_messenger, rocket, 1em, 1em);
        }
      }
    }
    &_top {
      a {      
        gap: 0.5em;
        &:before {
          content: "";
          @include emoji(twitter, star, 1em, 1em);
        }
      }
    }
  }
}

Bonjour @Don,

Je suis avec ferveur votre travail et je crois avoir intégré toutes vos créations dans mon forum. Cependant, avec cet élément particulier, je ne suis pas sûr. Depuis la mise à niveau du discourse, mon esprit s’est embrouillé et je ne me souviens plus où implémenter ces codes CSS. J’ai intégré votre code GitHub dans le thème, mais rien ne semble apparaître.

Je pense que le thème est censé être une base modifiable sur laquelle vous pouvez travailler :

Ce qui expliquerait pourquoi rien ne s’est affiché lorsque vous l’avez installé, car le modèle ferait probablement peu ou rien par lui-même.

Screenshot_20240325_115532_Chrome1361×1198 74.9 KB

Est-ce que cela devrait nous être visible ?

Screenshot_20240325_115729_Chrome1080×291 25.4 KB

ou

Screenshot_20240325_120045_Chrome245×112 5.53 KB

Non, car il s’agit d’un thème distant, ce qui signifie que vous devez soit le télécharger depuis GitHub et le téléverser sous forme de zip sur votre instance, soit forker le dépôt GitHub et y apporter vos modifications.

En effet, c’est un concept entièrement nouveau pour moi. Cependant, je comprends votre point de vue ; chaque jour est une opportunité d’apprendre, et j’apprécie la réponse rapide.

Salut @Aaron_Walsh Est-ce que ça a finalement fonctionné pour toi ? Y a-t-il un cas d’utilisation spécifique où tu veux l’utiliser ? Si tu partages quelques détails, je peux créer un composant de thème séparé basé là-dessus où il peut être facilement modifiable avec des paramètres.

Bonjour,

L’entreprise aurait été couronnée de succès ; cependant, je ne dispose plus d’un ordinateur portable Windows à des fins d’édition. Au lieu de cela, je suis passé à l’utilisation d’un Samsung Galaxy S9 Ultra, une décision que je regrette maintenant un peu .

Il existe une méthode par laquelle je peux accomplir cette tâche en utilisant mon serveur d’hébergement (cPanel) en téléchargeant et en modifiant. Néanmoins, je dois noter avec regret que le travail que vous avez réalisé peut s’avérer complexe pour certaines personnes.

Par conséquent, si vous êtes d’accord,

Ce design est l’objet de mon admiration et celui qui m’attire particulièrement !

Oui, c’est la raison pour laquelle il a été placé dans la catégorie Dev, mais ne vous inquiétez pas, je vais créer un Theme component pour ce cas d’utilisation.

Mes excuses, c’était un de mes oublis ! Cependant, à l’avenir, je serai mieux informé à ce sujet.

Bonjour Ce Theme component est terminé.

Tu es génial ! Merci !