Usage of atlaskit, Custom UI and Confluence


I was trying to use the from @atlaskit/icon package for a Confluence app. I saw that this is possible only for Custom UI.

My question is if there is any simple example of how to combine those two.

I followed this example to create a simple byline but I can’t find a simple example to implement the @atlaskit as well.

Mixalis Vakalos

1 Like

Hi @VakalosMixalis , you’ll need to install the atlaskit component in your frontend folder. Navigate into static/hello-world folder and run npm install --save @atlaskit/icon . Then you can modify App.js to add the icon

import React, { useEffect, useState } from 'react';
import { invoke } from '@forge/bridge';
import LikeIcon from '@atlaskit/icon/glyph/like';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);

  return (
      {data ? data : 'Loading...'}
      <LikeIcon label="" />

export default App;
1 Like

Hello @QuocLieu,

Thanks for the quick answer.
It works now.
It seems that I had installed the package in the wrong folder.