# Icône d'en-tête personnalisée mise à jour : publier des données via l'URL

**URL:** https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174
**Category:** Development
**Tags:** plugin-api
**Created:** [Septembre 5, 2024, 6:42 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174 "2024-09-05T18:42:31Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Septembre 5, 2024, 10:53 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174/4 "2024-09-05T22:53:29Z")

</div>

D’accord, une redirection vers une URL externe contenant le nom d’utilisateur.

Voici un exemple de base sur la façon dont vous pouvez le faire, en utilisant la nouvelle API&nbsp;:

```js
import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = `<template>
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Calculator"
        target="_blank"
      />
    </li>
  </template>`;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});

```

- `calculator` est un nom unique
- `iconComponent` fait référence à un `template` Glimmer intégré, comme vous le voyez ici, mais il peut également faire référence à un composant de classe Glimmer que vous créez dans le répertoire `components`.
- Vous pouvez choisir où placer votre icône en utilisant `before` ou `after` suivi du nom unique de l’icône d’en-tête.

![NVIDIA_Share_rvsjetCtUy](https://global.discourse-cdn.com/meta/original/4X/d/2/0/d20cdaeba8fa97aea600d5d680887ac82834c730.png)

N’hésitez pas à ajuster&nbsp;!

Remarque&nbsp;:

- La syntaxe `template` Glimmer ne fonctionnera pas en utilisant l’interface utilisateur.

Faites-moi savoir si vous avez besoin d’aide supplémentaire&nbsp;!

---

_[View the full topic](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174)._