Usage of atlaskit, Custom UI and Confluence

Forge Forge UI Kit and Custom UI
1

Hello,

I was trying to use the https://atlassian.design/components/icon/examples 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 https://developer.atlassian.com/platform/forge/build-a-custom-ui-app-in-confluence/ to create a simple byline but I can’t find a simple example to implement the @atlaskit as well.

Thanks,
Mixalis Vakalos

1 Like
2

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 (
    <div>
      {data ? data : 'Loading...'}
      <LikeIcon label="" />
    </div>
  );
}

export default App;
1 Like
3

Hello @QuocLieu,

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

2 Likes