How can i create a link with an left icon?

letters 0
Viewed 46

how can i create a link with icon?

currently actually i have this code

import {
    PlusOutlined,
} from '@ant-design/icons'
 <PlusOutlined style={{ float: 'left', fontSize: '150%' }} onClick={create} />
                    <span className='linkAdd'>
                        <a href=" url" onClick={create}>Add</a>
                    </span>

i have create an icon with a text like this:

  • add

but i have to put two events, one of them at the icon and the another at the link

how can i create the same component so that i can only use one event

btw this is the css:

.linkAdd a {
    color: #000;
    padding-left: 8px;
    float: left;
    color: #000;

}

.linkAdd:hover,
.linkAdd:hover a {
    color: #322dc3;
}
antd image reactjs css
1 Answers

You can wrap the icon into a tag as well. Please refer below an example of your code, by this, you just have add only one click event on parent a tag.

<a href="url" onClick={create}>
  <PlusOutlined 
    style={{ float: 'left', fontSize: '150%' }} 
  />
  Add
</a>

Hope this will help you! Note: Please add CSS according to your requirement.

Darshil Mehta0
Related