import { Star, StarFill } from '@notainc/kamon/react';
/** Or you can use separated import
 * import { Star } from '@notainc/kamon/react/Star';
 * import { StarFill } from '@notainc/kamon/react/StarFill';
 **/
function Like () {
  const [liked, setLiked] = useState(false);
  return <button onClick={setLiked(prev => !prev)}>
    {liked ? <StarFill /> : <Star />} Like
  </button>
}

SVG

For web applications, we recommend to use SVG Sprites.
We are following this process in /example.

Generate the SVG Sprites file from /svg. (Using svg-sprites library)
Insert the generated SVG Sprites inline under the body element. (This process enables to use icon anywhere)
To call icon instance, do like this

<body>
    <div class='sprite' hidden></div>  

    <!-- Call icon instance here -->
    <svg class='hoge'>
      <use xlink:href='#icon-name'></use>
    </svg>  

    <!-- Inserte SVG Sprites -->
    <script>
      $(function () {
        $('.sprite').load('dest/sprite.svg')
      })
    </script>
 </body>

// Set icon color
.hoge {
  fill: #555;
 }

Development

Clone this repository.
npm install
npm run build

License

Code

This software is licensed under the MIT. (http://opensource.org/licenses/mit-license.html)
Applies to all HTML and CSS and Javascript files.

Icons

Some icons in the /svg directory use the source of following service, and it is necessary to follow the license applied by them.
We do not guarantee that our users are compliant with the license.
Fontawesome
License: SIL OFL 1.1 (http://scripts.sil.org/OFL)

FAQs

What is @notainc/kamon?

Is @notainc/kamon popular?

Is @notainc/kamon well maintained?

Package last updated on 01 Oct 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install