imo-tikuwa/yellow-blob-picker

Android5および7で採用されていた黄色スライムくんをアイコンピッカーとして使用するjqueryプラグインです

yellow-blob-picker

This is a jquery plugin that uses Yellow blob, which was used in Android 5 and 7, as an icon picker.

A list of available icons and a demo of the icon picker.

Usage

1. Load jquery.yellow-blob-picker.css in the head.

<link rel="stylesheet" href="css/jquery.yellow-blob-picker.css">

2. Load jquery.yellow-blob-picker.js after loading jquery.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery.yellow-blob-picker.js"></script>

3. Call yellowBlobPicker().

<input type="text" id="icon-picker" name="picker1" />

<script type="text/javascript">
  $('#icon-picker').yellowBlobPicker();
</script>

About icon display outside the icon picker.

You can display the yellow-blob icon outside the icon picker by using the $.createYellowBlobIcon function.

<script type="text/javascript">
  let icon = 'android5-u1f60a';
  $('.display-icon').html($.createYellowBlobIcon(icon));
</script>

Example.

Display the icon picker. And show the selected icon in the .display-icon element when the "change" event fires.

<input type="text" id="icon-picker" name="picker1" />
<div class="display-icon" style="font-size:64px"></div>
<div class="display-icon" style="font-size:32px"></div>
<div class="display-icon" style="font-size:16px"></div>

<script type="text/javascript">
  $(() => {
    let $picker = $('#icon-picker').yellowBlobPicker({
      iconsPerPage: 30,
      emptyIcon: false,
    });
    $picker.on('change', e => {
      $('.display-icon').html($.createYellowBlobIcon(e.target.value));
    });
    $('.display-icon').html($.createYellowBlobIcon($picker.val()));
  });
</script>

Options

The icon picker itself uses the fontIconPicker plugin.
Therefore, among the options of the fontIconPicker plugin, options other than "source" and "iconGenerator" can be used as they are.

Credits

• The emoji embedded within the plugin is licensed under the Apache License 2.0.
  • Of the svg files used as the source of the web font, the icon using linearGradient was replaced with a single color (#fcc21b) before use.
• The fontIconPicker embedded within the plugin is licensed by MIT.