- kamon is a project to manage svg icons for the products of NOTA Inc.
- See https://nota.github.io/kamon/example/ to check all icons.
- Please get svg icon set via npm.
npm install @notainc/kamon
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>
}- 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;
}- Clone this repository.
npm installnpm run build
- Copyright (c) 2019 Nota Inc.
- This software is licensed under the MIT. (http://opensource.org/licenses/mit-license.html)
- Applies to all HTML and CSS and Javascript files.
-
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)