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
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
Hello @QuocLieu,
Thanks for the quick answer.
It works now.
It seems that I had installed the package in the wrong folder.
2 Likes