- kamon is a project to manage svg icons for the products of Helpfeel 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'; **/functionLike(){const[liked,setLiked]=useState(false);return<buttononClick={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><divclass='sprite' hidden></div><!-- Call icon instance here --><svgclass='hoge'><usexlink: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)