Picon is a parametric SVG icon generator that can be easily used with just a html tag or JavaScript. Picon is still in beta version and is subject to frequent changes and modifications. I would be very happy to hear your comments and suggestions on the github issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>picon simple sample</title>
</head>
<body>
<i data-pc-id="clock" data-pc-hour="10" data-pc-minute="10"></i>
<script src="https://cdn.jsdelivr.net/gh/TetsuakiBaba/picon@main/picon.js" crossorigin="anonymous" type="text/javascript"></script>
</body>
</html><script src="https://cdn.jsdelivr.net/gh/TetsuakiBaba/picon@main/picon.js" crossorigin="anonymous" type="text/javascript"></script>
Picon itself has no methods to set color or size. Use css to specify size and color. A simple example is shown below.
<div style="font-size:3em;color:coral">
<i data-pc-id="circle" data-pc-text="悟"></i> 孫悟空
</div>Create a picon with a single line of JavaScript;
new picon('#svg', 'clock', {
clock: {
hour: 10,
minute: 8,
}
});
| name | parameter(s) |
|---|---|
| clock | hour, minute |
| battery | percentage(0-100), show_value(true, false) |
| calendar | text(Up to 2 letters are beautiful in appearance. 1 character is better for 2-byte characters) |
| badge | text(Up to 2 letters are beautiful in appearance. 1 character is better for 2-byte characters) |
| circle | text(Up to 2 letters are beautiful in appearance. 1 character is better for 2-byte characters) |
| arrow | angle(degrees), type(normal, cheveron), surround(none, circle, square) |
| filetype | text |
| volume | value(0-100) |
MIT License