0byt3m1n1

Path: /home/mgatv524/atvcms.com.br/maisqtv2/vendor/emojione/emojione/demos/ [ Home ]
File: sprites-svg.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Sprites - Emoji One</title>

  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <script src="scripts/svg4everybody.min.js"></script>

  <!-- Emoji One CSS: -->
  <link rel="stylesheet" href="./../assets/css/emojione.css"/>

  <!-- jQuery: -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <!-- Syntax Highlighting -->
  <script type="text/javascript" src="scripts/shCore.js"></script>
  <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
  <script type="text/javascript" src="scripts/shBrushCss.js"></script>
  <script type="text/javascript" src="scripts/shBrushPhp.js"></script>
  <script type="text/javascript">SyntaxHighlighter.all();</script>
  <link rel="stylesheet" href="styles/shCoreMidnight.css"/>

  <!-- Demos Stylesheet: -->
  <link rel="stylesheet" href="styles/demos.css"/>

  <!-- Typekit: -->
  <script type="text/javascript" src="//use.typekit.net/ivu8ilu.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

  <script src="./../lib/js/emojione.js"></script>

  <script type="text/javascript">
    // #################################################
    // # Optional

    // default is PNG but you may also use SVG
    emojione.imageType = 'svg';

    //Turn on sprites
    emojione.sprites = true;

    // default is ignore ASCII smileys like :) but you can easily turn them on
    emojione.ascii = true;

    // if you want to host the images somewhere else
    // you can easily change the default paths
    emojione.imagePathPNG = './../assets/png/';
    emojione.imagePathSVG = './../assets/svg/';
    emojione.imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg'

    // #################################################
  </script>

  <script type="text/javascript">
    $(document).ready(function() {
      $(".convert-emoji").each(function() {
        var original = $(this).html();
        // use .shortnameToImage if only converting shortnames (for slightly better performance)
        var converted = emojione.toImage(original);
        $(this).html(converted);
      });
    });
  </script>

</head>
<body>

<!-- Masthead -->
<header class="masthead">
  <div class="container">
    <h1 class="masthead-title">Emoji One Labs</h1><span class="version">version <span>1.5.1</span></span>
  </div>
</header>

<!-- Breadcrum Navigation -->
<nav class="breadcrumbs">
  <div class="container">
    <a class="breadcrumb-item top-level" href="index.html">All Demos</a> &rsaquo;
    <a class="breadcrumb-item" href="index.html#extras">Extras</a> &rsaquo;
    <a class="breadcrumb-item active" href="sprites-svg.html">Sprites (SVG)</a>
  </div>
</nav>

<!-- Page: -->
<main>

  <div class="container">

    <h1>Emoji One SVG Sprites</h1>

    <p class="convert-emoji" style="font-size: 48px; text-align: center">
      &#x1f352;

      :)

      :coffee:

      :(

      :fire:

      &#x1f354;
    </p>

    <p>
      We've setup an <a href="https://github.com/Ranks/emojione/blob/master/assets/sprites/emojione.sprites.svg">SVG Sprite</a> for people to use. These sprites are vector based and resizeable infinitely, though please note that they do require a bit of setup&hellip;
    </p>

    <h3>Some Considerations</h3>
    <ul>
      <li>These are not supported in IE8.</li>
      <li>Cross domain SVG sprites are blocked, sprites have to be hosted on the same domain as the requesting page (and thus are not available via our CDN)</li>
    </ul>

    <h3>1. Add IE Fix:</h3>    <p>
      IE does not support SVG sprites, to get it working you'll need to include <a href="https://github.com/jonathantneal/svg4everybody">SVG4Everybody</a> and attach the following meta tag in your <code>&lt;head&gt;</code>:
    </p>
    <pre class="brush: php">&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt;
&lt;script src=&quot;svg4everybody.min.js&quot;&gt;&lt;/script&gt;</pre>

    <h3>2. Enable SVG Sprite mode and set the relative path</h3>

    <p>Once that's done, it's just a matter of enabling SVG Sprites in your Emoji One configuration</p>

    <p class="notice" style="margin-bottom: 2em">
      <strong>Note: </strong> SVG sprites require a third configuration variable: <code>emojione.imagePathSVGSprites</code>. This is in contrast to the PNG sprites, which set the path within the sprite CSS file. Thankfully with SVG Sprites we don't need to include additional CSS, so it needs to be set as a variable in the script.
    </p>

    <p>Javascript Example</p>

      <pre class="brush: php">emojione.imageType = 'svg';
emojione.sprites = true;
emojione.imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg';</pre>

    <p>PHP Example</p>
      <pre class="brush: php">$client = new Client(new Ruleset());
$client->imageType = 'svg';
$client->sprites = true;
$client->imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg';</pre>

    <p>If you are not using our conversion scripts, SVG sprites can be implemented using the following markup structure. In this example we're using the unicode symbol 1F433 aka <svg class="emojione"><description>&#x1f433;</description><use xlink:href="../assets/sprites/emojione.sprites.svg#emoji-1F433"></use></svg>. The <code>&lt;description&gt;</code> tag works similarly to alt text, enabling copy pasting of the emoji unicode characters.
    </p>
      <pre class="brush: php">
&lt;svg class=&quot;emojione&quot;&gt;
    &lt;description&gt;&amp;#x1f433;&lt;/description&gt;
    &lt;use xlink:href=&quot;path/to/emojione.sprites.svg#emoji-1F433&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;</pre>


  </div>

</main>

<footer class="demo-footer">
  <div class="container">
    <small>&copy; Copyright 2014-2015 Ranks.com.</small>
    <small>Emoji One artwork is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/legalcode">CC-BY-SA-4.0</a> License</small>
    <small>Emoji One demos, documentation, scripts, stylesheets and all other non-artwork is licensed under the <a
      href="http://opensource.org/licenses/MIT">MIT</a> License</small>
  </div>
</footer>

</body>
</html>