Interactive icon

If you want an interactive icon that changes when hovered over (such as color and cursor), simply set the default color using the color property and add the interactive property. That's it! You won't need to specify an extra color for the hovered or the active state.

import React from 'react';
import LinkExternalM from '@semcore/ui/icon/LinkExternal/m';
import { Hint } from '@semcore/ui/tooltip';

const Demo = () => (
  <Hint
    tag={LinkExternalM}
    interactive
    title='Go to our awesome article'
    color='icon-secondary-neutral'
  />
);

export default Demo;