Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Toogle heroicons outline and solid in react

I import outline and solid icon

import {   HeartIcon } from "@heroicons/react/24/outline";
import {   HeartIcon } from "@heroicons/react/24/solid";

const [isClick, setIsClick] = useState(false);

<HeartIcon onClick={()=>setIsClick(true)} >
{
 isClick && 
<HeartIcon onClick=(()=>setIsClick(false))
}

How to import and how to use in React js

I have error one icon import outline and solid.

I want to toggle if outline heart is click, show solid heart icon.

Tags:

2

Answers


  1. 0

    You can use it as so:

    import {   HeartIcon as HeartIconOutline } from "@heroicons/react/24/outline";
import {   HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";

    If you need more info on this; let me know

    Login or Signup to reply.
  2. 0

    First of all, please check the package version you’ve installed. Older versions would work fine without specifying the width when importing, and just returning the component with the desired width:

    import { HeartIcon } from '@heroicons/react/solid';
...
 <HeartIcon width={24} />

    Then, you need to use an alias for at least one of them, so you don’t have duplicate identifiers.

    import { HeartIcon } from '@heroicons/react/24/outline'
import { HeartIcon as HeartIconSolid } from '@heroicons/react/24/solid'

    For the toggle functionality, if you want to change from outlined to solid, you can simply set a boolean state to change the component that will render once it’s clicked.

    import { HeartIcon } from '@heroicons/react/24/outline'
import { HeartIcon as HeartIconSolid } from '@heroicons/react/24/solid'
import React from 'react'

const HeartIcons = () => {
  const [showSolid, setShowSolid] = React.useState(false)

  return (
    <div onClick={() => setShowSolid(true)}>
      {showSolid ? <HeartIconSolid /> : <HeartIcon />}
    </div>
  )
}

export default HeartIcons

    If you want a toggle function, then you can do this:

     const [toggleHeart, setToggleHeart] = React.useState(false)

  return (
    <div onClick={() => setToggleHeart(!toggleHeart)}>
      {toggleHeart ? <HeartIcon /> : <HeartIconSolid />}
    </div>
  )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search