Replace Semantic UI's Tab with an SVG

Question

I'm using Tab from Semantic UI for some tables.

The problem is that the design of it should look different and I've got an SVG for that: https://svgur.com/s/Nnu

And this is the code:

const clientsTab = (
  <ContentContainer>
    <div className="clients-table">
      <div className="clients-table-utils">
        <SearchBox
          placeholder="Search client"
          onChange={this.searchHandler}
        />
        <Dropdown
          className="hello-dropdown"
          placeholder="Company"
        />
        <Dropdown
          className="hello-dropdown"
          placeholder="Turnover"
        />
        <Dropdown
          className="hello-dropdown"
          placeholder="Status"
        />
      </div>
      <GenericTable
        headers={headers}
        rows={rows}
        entityName="clients"
        idList={idList}
      />
    </div>
  </ContentContainer>
);

const panes = [
  {
    menuItem: 'Clients',
    render: () => <Tab.Pane>{clientsTab}</Tab.Pane>,
  },
];

return (
  <Layout>
      <TabContainer panes={panes} />
  </Layout>
);

TabContainer is a simple component which looks like this:

import React from 'react';
import { Tab } from 'semantic-ui-react';
import './TabContainer.scss';

export default class TabContainer extends React.PureComponent {
  render() {
    const { panes } = this.props;
    return <Tab panes={panes} />;
  }
}

And the final resut:

I don't know if it is possible to replace the Tab with the SVG. Is there a way to do it?

Answer 1

You could wrap the svg as an image inside a Menu.Item component like this:

const panes = [
  {
    menuItem: (
      <Menu.Item
        key="Tab 1"
        style={{
          display: 'block',
          background:
            'url(https://svgshare.com/i/Nnu.svg) left center no-repeat',
          backgroundSize: 'cover',
          textAlign: 'center',
          minWidth: 300,
          borderColor: 'transparent',
        }}>
        <p>Tab One</p>
      </Menu.Item>
    ),
    render: () => // The content you want to render...,
  }
];

So this approach makes your svg the background image for each menu item.

Be sure to import Menu from 'semantic-ui-react'.