Clem sur le devant de la scène !

Oh yeah !

a marqué ce sujet comme résolu.

On a une petite question sur Twitter de quelqu’un qui pense que les smileys sont libres de droits.

Il cite ce lien : https://openclipart.org/collection/collection-detail/Justin%20Ternet/11823

Je ne sais pas qui est Julien Ternet, ni quelle licence est appliquée aux smileys, quelqu’un saurait ?

Le repo GitHub de la comm' n’est pas très aidant…

viki53

Salut !

Désolé pour ce retard de réponse. Ils sont sous licence WTFPL (domaine public). Excusez pour cette omission.

Et bravo pour la Clem qui mange des popcorns ! :p

Edit : (Justin Ternet est un de mes autres pseudo.)

+0 -0

J’ai pensé à quelques choses d’un peu fou. Vu que les Twemoji sont en SVG, on pourrait faire notre propre série complet de Smiley Clem de façon assez "rapide", tout en adaptant les détail pour chacun.

Je vais essayer de faire les deux premières lignes quand j’aurais du temps pour voir le rendu :D

https://emojipedia.org/people/

A-312

Bon courage alors, le travail risque d’être titanesque :D

+0 -0

Bon courage alors, le travail risque d’être titanesque :D

ou pas

Clemoji v3-brouillon :

A partir des twemojis :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="language" content="fr">
    <title>SVG</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/convert.js"></script>
    <style>
    html, body {
        display:inline-block;
    }
    div {
        width:24px;
        display:inline-block;
    }
    </style>
</head>
<body>
</body>
</html>

const files = `1f47f.svg  1f600.svg  1f601.svg  1f602.svg  1f603.svg  1f604.svg  1f605.svg  1f606.svg
1f607.svg  1f608.svg  1f609.svg  1f60a.svg  1f60b.svg  1f60c.svg  1f60d.svg  1f60e.svg
1f60f.svg  1f610.svg  1f611.svg  1f612.svg  1f613.svg  1f614.svg  1f615.svg  1f616.svg
1f617.svg  1f618.svg  1f619.svg  1f61a.svg  1f61b.svg  1f61c.svg  1f61d.svg  1f61e.svg
1f61f.svg  1f620.svg  1f621.svg  1f622.svg  1f623.svg  1f624.svg  1f625.svg  1f626.svg
1f627.svg  1f628.svg  1f629.svg  1f62a.svg  1f62b.svg  1f62c.svg  1f62d.svg  1f62e.svg
1f62f.svg  1f630.svg  1f631.svg  1f632.svg  1f633.svg  1f634.svg  1f635.svg  1f636.svg
1f637.svg  1f641.svg  1f642.svg  263a.svg  1f643.svg  1f644.svg  1f910.svg  1f911.svg
1f912.svg  1f913.svg  1f914.svg  1f915.svg  1f917.svg  1f922.svg  1f923.svg  1f924.svg
1f925.svg  1f927.svg  1f928.svg  1f929.svg  1f92a.svg  1f92b.svg  1f92c.svg  1f92d.svg
1f92e.svg  1f92f.svg  1f970.svg  1f973.svg  1f974.svg  1f975.svg  1f976.svg  1f97a.svg
2639.svg`.replace(/\n/g, "  ").split("  ");

$(window).on("load", function() {
    let fileN = 0;

    function getSVG(num) {
        if (!files[num])
            return;

        $.get("svg/" + files[num], function(data) {
            const $clemoji = $("<div></div>")
                .attr("id", "clemoji_" + files[num])
                .appendTo("body")
                .append(new XMLSerializer().serializeToString(data.documentElement));

            if (fileN < 60) {
                $clemoji.find("#g14").html(`${$clemoji.find("#g14").html()}<g id="gfeuille" transform="translate(113.91075,50.659)">
                    <path id="path4138-2" style="fill:#479F00;" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
                    <path id="path4138-2-5" style="fill:#479F00;" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
                </g>`);

                $clemoji.find("#path18").attr("d", "M 0,58 38,58 38,0 0,0 0,38 Z");
                $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,0,64.5)");
                $clemoji.find("svg").attr("viewBox", "0 0 47.5 64.5");

                $clemoji.find("path").each(function() {
                    if (!$(this).css("fill")) {

                    } else if (rgb2hex($(this).css("fill")) === "#ffcc4d" || rgb2hex($(this).css("fill")) === "#fdcb58") {
                        $(this).css("fill", "#FAAC2C");
                    } else if (rgb2hex($(this).css("fill")) === "#664500") {
                        $(this).css("fill", "#992500");
                    }
                });
            } else { //v2
                $clemoji.find("svg").html(`<g id="g10" transform="matrix(0.895,0,0,0.895,2,17)">${$clemoji.find("svg").html()}
                    <g id="gfeuille" transform="matrix(1,0,0,-1,-1.19,-17) translate(113.91075,-3.4)">
                        <path id="path4138-2" style="fill:#479F00;" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
                        <path id="path4138-2-5" style="fill:#479F00;" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
                    </g>
                </g>`);
                $clemoji.find("svg").attr("viewBox", "0 0 36 51");

                $clemoji.find("path, ellipse, circle").each(function() {
                    console.log($(this).attr("fill"));
                    if (!$(this).attr("fill")) {

                    } else if ($(this).attr("fill") === "#FFCC4D" || $(this).css("fill") === "#FDCB58" ||
                                $(this).css("fill") === "#FFCB4C") {

                        $(this).attr("fill", "#FAAC2C");
                    } else if ($(this).attr("fill") === "#664500") {
                        $(this).attr("fill", "#992500");
                    }
                });
            }
            fileN++;
            getSVG(fileN);
        });
    };
    getSVG(fileN);
});

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return (rgb) ? "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]) : null;
}

Il faut modifier certain manuellement.

+6 -0

Légendes :

  • Vert : les feuilles ;
  • Bleu : la couleur du fond ;
  • Jaune : Améliorer l’effet/les couleurs/l’appliquer sur les feuilles ;
A modifier
A modifier

Dans l’ordre des lignes :

  • Ligne 1 : Améliorer les 2 démons ;
  • Ligne 2 : Couleur des lunettes moins noir comme :soleil:
  • Ligne 3 : Améliorer la couleur, feuille plate comme :colere2: ou légère couleur comme :diable: ?

  • Ligne 6 :

    1. Inverser les feuilles ;
    2. Rougir les traits noirs (de la bouche) ;
    3. Couleur des lunettes moins noir comme :soleil:
    4. Inclinaison des feuilles + couleurs ;
    5. Malade avec des feuilles + bandages ?
    6. Modifier la couleur des contours ;
    7. Modifier l’inclinaison des feuilles.

  • Ligne 7 :

    1. Modifier l’inclinaison des feuilles ;
    2. Couleur + inclinaison des feuilles ;
    3. Couleur.
    4. Couleur des traits (moins noirs ?) + feuilles ?
    5. Couleur (fond + trait).
    6. Présence des feuilles ;
    7. Présence des feuilles.

  • Ligne 8 :

    1. Couleurs des yeux ;
    2. Effet froid sur la tête + couleur contour ?
    3. Couleur des yeux (fond noir + couleur iris)

EDIT :

Modifier la nuance de bleu des larmes avec celle de : https://github.com/zestedesavoir/documents-communication/raw/master/emoticones/smileys_clem_svg/sprite_clem.svg

+1 -0

Rendu quasi final :

Clemoji - version quasi-final
Clemoji - version quasi-final
const files = `1f47f.svg  1f600.svg  1f601.svg  1f602.svg  1f603.svg  1f604.svg  1f605.svg  1f606.svg
1f607.svg  1f608.svg  1f609.svg  1f60a.svg  1f60b.svg  1f60c.svg  1f60d.svg  1f60e.svg
1f60f.svg  1f610.svg  1f611.svg  1f612.svg  1f613.svg  1f614.svg  1f615.svg  1f616.svg
1f617.svg  1f618.svg  1f619.svg  1f61a.svg  1f61b.svg  1f61c.svg  1f61d.svg  1f61e.svg
1f61f.svg  1f620.svg  1f621.svg  1f622.svg  1f623.svg  1f624.svg  1f625.svg  1f626.svg
1f627.svg  1f628.svg  1f629.svg  1f62a.svg  1f62b.svg  1f62c.svg  1f62d.svg  1f62e.svg
1f62f.svg  1f630.svg  1f631.svg  1f632.svg  1f633.svg  1f634.svg  1f635.svg  1f636.svg
1f637.svg  1f641.svg  1f642.svg  263a.svg  1f643.svg  1f644.svg  1f910.svg  1f911.svg
1f912.svg  1f913.svg  1f914.svg  1f915.svg  1f917.svg  1f922.svg  1f923.svg  1f924.svg
1f925.svg  1f927.svg  1f928.svg  1f929.svg  1f92a.svg  1f92b.svg  1f92c.svg  1f92d.svg
1f92e.svg  1f92f.svg  1f970.svg  1f973.svg  1f974.svg  1f975.svg  1f976.svg  1f97a.svg
2639.svg`.replace(/\n/g, "  ").split("  ");

$(window).on("load", function() {
    let fileN = 0;

    function getSVG(num) {
        if (!files[num])
            return;

        $.get("svg/" + files[num], function(data) {
            const $clemoji = $("<div></div>")
                .attr("id", "clemoji_" + files[num].split(".")[0])
                .appendTo("body")
                .append(new XMLSerializer().serializeToString(data.documentElement));

            if (fileN < 60) {
                $clemoji.find("#g14").html(`${$clemoji.find("#g14").html()}<g id="gfeuille" transform="translate(113.91075,50.659)">
                    <path id="path4138-2" style="fill:#479F00;" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
                    <path id="path4138-2-5" style="fill:#479F00;" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
                </g>`);

                $clemoji.find("#path18").attr("d", "M 0,58 38,58 38,0 0,0 0,38 Z");
                $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,0,64.5)");
                $clemoji.find("svg").attr("viewBox", "0 0 47.5 64.5");
                $clemoji.find("path").each(replaceColor);

                if (["1f47f.svg", "1f608.svg"].indexOf(files[num]) !== -1) // 👿 😈
                    $clemoji.find("#gfeuille").remove();

                // Hand
                if (files[num] === "1f631.svg") // 😱
                    $clemoji.find("#path42, #path46").css("fill", "#479F00");

                if (files[num] === "263a.svg") // ☺
                    $clemoji.find("#path34, #path38, #path42, #path46, #path54").css("stroke", "#992500");
            } else { //v2
                $clemoji.find("svg").html(`<g id="g10" transform="matrix(0.895,0,0,0.895,2,17)">${$clemoji.find("svg").html()}
                    <g id="gfeuille" transform="matrix(1,0,0,-1,-1.19,-18) translate(113.91075,-3.4)">
                        <path id="path4138-2" fill="#479F00" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
                        <path id="path4138-2-5" fill="#479F00" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
                    </g>
                </g>`);

                $clemoji.find("svg").attr("viewBox", "0 0 36 51");
                $clemoji.find("path, ellipse, circle").each(replaceColor);

                if (["1f92f.svg", "1f973.svg"].indexOf(files[num]) !== -1) // 🤯 🥳
                    $clemoji.find("#gfeuille").remove();

                if (files[num] === "1f913.svg") // 🤓
                    $clemoji.find("path[fill='#595959']").attr("fill", "#ad0dff");

                if (files[num] === "1f975.svg") // 🥵
                    $clemoji.find("#gfeuille path").attr("fill", "#987c37");

                if (files[num] === "1f976.svg") // 🥶
                    $clemoji.find("#gfeuille path").attr("fill", "#b8b800");

                //>> Hand
                if (["1f917.svg", "1f92d.svg"].indexOf(files[num]) !== -1) { // 🤗 🤤
                    $clemoji.find("path[fill='#F4900C']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");
                }

                if (["1f914.svg", "1f92b.svg"].indexOf(files[num]) !== -1) { // 🤔 🤫
                    $clemoji.find("path[fill='#F19020']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");

                    if (files[num] === "1f914.svg") { // 🤔
                        $clemoji.find("#gfeuille").attr("transform", "rotate(10 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    }

                    if (files[num] === "1f92b.svg") { // 🤫
                        const $path = $clemoji.find("path[fill='#992500']"),
                            attrD = $path.attr("d");
                        $path.attr("d", "M22.409 30.743zm-3.259 4.73z" + attrD.substr(757));
                        $clemoji.find("#g10").html(`${$clemoji.find("#g10").html()}
                            <path fill="#3E721D" d="${attrD.substr(0, 757)}"></path>`);
                    }
                }
                //<<

                if (files[num] === "1f643.svg") { // 🙃
                    $clemoji.find("svg").attr("viewBox", "0 0 36 51");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,2,2)");
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,1,-1.19,54) translate(113.91075,-3.4)");
                }

                if (files[num] === "1f923.svg") { // 🤣
                    $clemoji.width("82px").css("margin-left", "-18px");
                    $clemoji.find("svg").attr("viewBox", "0 0 46 51");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,12,17)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-45 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                }

                if (files[num] === "1f925.svg") { // 🤥 pinocchio
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,-1,-4.19,-15.5) translate(113.91075,-3.4)");
                }

                if (files[num] === "1f92a.svg") { // 🤪 idiot incliné
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-18 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                }
            }
            fileN++;
            getSVG(fileN);
        });
    };
    getSVG(fileN);
});

function replaceColor() {
    let attrcss,
        boolRGB = false;

    if ($(this).attr("fill")) {
        attrcss = "attr";
    } else if ($(this).css("fill")) {
        attrcss = "css";
        boolRGB = true;
    } else {
        return;
    }

    const fill = (boolRGB) ? rgb2hex($(this).css("fill")) : $(this).attr("fill");

    if (["#FFCC4D", "#FDCB58", "#FFCB4C"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#FAAC2C");
    } else if (["#664500", "#65471B"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#992500");
    } else if (["#5DADEC", "#64AADD"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#3DAEFF");
        $(this)[attrcss]("fill-opacity", 0.64);
    } else if (["#292F33"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#595959");
    }
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return (rgb) ? "#" + (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase() : null;
}
+19 -0

Quand Clem devient violette et que des cornes démoniaques poussent sur sa tête, elle perd ses feuilles ? :'(

Situphen

Pas final ces deux là. ^^

Conversion Emoji2 en Clemoji v3 :

Normal HD
:B clemoji_b_ld 19x27 clemoji_b_hd 38x54 
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     id="svg2" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
     height="1446.904px" viewBox="0 -422.904 1024 1446.904" enable-background="new 0 -422.904 1024 1446.904" xml:space="preserve">
<g id="g10" transform="matrix(1.25,0,0,-1.25,0,45)">
    <g id="g12">
        <g>
            <g>
                <defs>
                    <rect id="SVGID_1_" x="-230.4" y="-1043.064" width="1280" height="1574.638"/>
                </defs>
                <clipPath id="SVGID_2_">
                    <use xlink:href="#SVGID_1_"  overflow="visible"/>
                </clipPath>
                <g id="g14" clip-path="url(#SVGID_2_)">
                    <g id="g20" transform="translate(36,18)">
                        <path id="path22" fill="#FAAC2C" d="M783.2-391.6c0-226.213-183.387-409.6-409.6-409.6C147.41-801.2-36-617.813-36-391.6
                            C-36-165.41,147.41,18,373.6,18C599.813,18,783.2-165.41,783.2-391.6"/>
                    </g>
                    <g id="g32" transform="translate(25,10)">
                        <g>
                            <path fill="#992500" d="M581.19-459.783v-78.884c0-31.732-3.766-56.124-11.291-73.173
                                c-7.527-17.044-19.087-30.509-34.683-40.395c-15.598-9.882-32.912-14.825-51.954-14.825c-17.775,0-33.96,4.33-48.555,12.993
                                c-14.599,8.662-26.434,21.388-35.498,38.166c-7.073-20.791-15.37-36.79-24.891-48.002
                                c-9.521-11.208-21.038-19.929-34.546-26.169c-13.511-6.239-28.154-9.359-43.931-9.359c-32.098,0-59.258,11.744-81.47,35.226
                                c-22.216,23.487-33.323,54.995-33.323,94.527v109.895L581.19-459.783L581.19-459.783z"/>
                            <path fill="#FFFFFF" d="M542.019-498.953h-128.12v-22.895c0-27.805,2.584-48.25,7.752-61.337
                                c5.167-13.082,13.33-23.445,24.48-31.078c11.154-7.633,23.531-11.45,37.132-11.45c18.314,0,32.684,6.41,43.113,19.22
                                c10.427,12.811,15.642,33.212,15.642,61.2L542.019-498.953L542.019-498.953z"/>
                            <path fill="#FFFFFF" d="M373.64-499.071H220.222v-49.593c0-29.245,2.855-50.68,8.568-64.306
                                c5.712-13.622,14.641-24.566,26.794-32.834c12.148-8.263,25.298-12.398,39.442-12.398c17.771,0,33.276,5.81,46.516,17.43
                                c13.234,11.62,22.305,27.593,27.202,47.927c3.263,13.63,4.895,37.347,4.895,71.149v22.625H373.64z"/>
                        </g>
                        <path id="path34" fill="#992500" d="M615.201-504.144h-462c-18.217,0-33.002,12.339-33.002,27.605
                            c0,15.266,14.784,27.605,33.002,27.605h462c18.248,0,32.998-12.34,32.998-27.605
                            C648.2-491.805,633.45-504.144,615.201-504.144"/>
                    </g>
                    <g id="g32_1_" transform="translate(14.5,22.5)">
                        <path id="path34_1_" fill="#992500" d="M316.256-293.7c0-44.009-25.464-79.644-56.889-79.644
                            c-31.426,0-56.889,35.635-56.889,79.644c0,43.987,25.463,79.645,56.889,79.645C290.792-214.056,316.256-249.714,316.256-293.7
                            "/>
                    </g>
                    <g id="g36" transform="translate(26.5,22.5)">
                        <path id="path38" fill="#992500" d="M577.322-293.7c0-44.009-25.463-79.644-56.889-79.644
                            c-31.425,0-56.889,35.635-56.889,79.644c0,43.987,25.464,79.645,56.889,79.645C551.859-214.056,577.322-249.714,577.322-293.7
                            "/>
                    </g>
                    <g id="g4262" transform="translate(113.91075,36.671128)">
                        <path id="path4138-2" fill="#479F00" d="M638.088,337.652
                            c-180.512-0.023-326.845-146.379-326.823-326.868c0.068-3.75,0.203-7.477,0.406-11.205c7.206-0.61,14.435-0.971,21.686-1.084
                            C513.87-1.527,660.203,144.807,660.226,325.318c0,0.022,0,0.022,0,0.045c-0.091,3.705-0.226,7.432-0.406,11.159
                            C652.591,337.132,645.339,337.516,638.088,337.652L638.088,337.652z"/>
                        <path id="path4138-2-5" fill="#479F00" d="M25.804,258.996
                            c138.653,0,251.035-112.427,251.035-251.081c-0.068-2.869-0.158-5.737-0.316-8.607c-5.534-0.452-11.091-0.723-16.648-0.813
                            C121.199-1.527,8.795,110.878,8.795,249.531c0,0.023,0,0.023,0,0.023c0.045,2.869,0.158,5.715,0.316,8.584
                            C14.668,258.611,20.225,258.905,25.804,258.996L25.804,258.996z"/>
                    </g>
                </g>
            </g>
        </g>
    </g>
</g>
</svg>
+3 -0

J’ai calibré la taille des .SVG pour un futur export en 19xHH plus facile, ça m’a pris du temps :

;) :D :p :-° :zorro: :ninja: :colere:

19xHH
19xHH
const files = `1f47f.svg  1f600.svg  1f601.svg  1f602.svg  1f603.svg  1f604.svg  1f605.svg  1f606.svg
1f607.svg  1f608.svg  1f609.svg  1f60a.svg  1f60b.svg  1f60c.svg  1f60d.svg  1f60e.svg
1f60f.svg  1f610.svg  1f611.svg  1f612.svg  1f613.svg  1f614.svg  1f615.svg  1f616.svg
1f617.svg  1f618.svg  1f619.svg  1f61a.svg  1f61b.svg  1f61c.svg  1f61d.svg  1f61e.svg
1f61f.svg  1f620.svg  1f621.svg  1f622.svg  1f623.svg  1f624.svg  1f625.svg  1f626.svg
1f627.svg  1f628.svg  1f629.svg  1f62a.svg  1f62b.svg  1f62c.svg  1f62d.svg  1f62e.svg
1f62f.svg  1f630.svg  1f631.svg  1f632.svg  1f633.svg  1f634.svg  1f635.svg  1f636.svg
1f637.svg  1f641.svg  1f642.svg  263a.svg  1f643.svg  1f644.svg  1f910.svg  1f911.svg
1f912.svg  1f913.svg  1f914.svg  1f915.svg  1f917.svg  1f922.svg  1f923.svg  1f924.svg
1f925.svg  1f927.svg  1f928.svg  1f929.svg  1f92a.svg  1f92b.svg  1f92c.svg  1f92d.svg
1f92e.svg  1f92f.svg  1f970.svg  1f973.svg  1f974.svg  1f975.svg  1f976.svg  1f97a.svg
2639.svg`.replace(/\n/g, "  ").split("  ");

$(window).on("load", function() {
    let fileN = 0;

    function getSVG(num) {
        if (!files[num])
            return;

        $.get("svg/" + files[num], function(data) {
            const $clemoji = $("<div></div>")
                .attr("id", "clemoji_" + files[num].split(".")[0])
                .appendTo("body")
                .append(new XMLSerializer().serializeToString(data.documentElement));

            if (fileN < 60) {
                $clemoji.find("#g14").html(`${$clemoji.find("#g14").html()}<g id="gfeuille" transform="translate(113.91075,50.659)">
                    <path id="path4138-2" style="fill:#479F00;" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
                    <path id="path4138-2-5" style="fill:#479F00;" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
                </g>`);

                $clemoji.find("metadata").remove();
                $clemoji.find("#path18").attr("d", "M 0,58 38,58 38,0 0,0 0,38 Z");
                $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,-2.5,62.5)");
                $clemoji.find("svg").attr("viewBox", "0 0 42.5 63")
                                    .css("enable-background", "0 0 42.5 63");
                $clemoji.find("path").each(replaceColor);

                if (["1f47f.svg", "1f608.svg"].indexOf(files[num]) !== -1) { // 👿 😈
                    $clemoji.find("#gfeuille").remove();
                    $clemoji.find("#g10").attr("transform", "matrix(1.18,0,0,-1.18,-1.2,61.2)");
                }

                if (files[num] === "1f60d.svg") { // 😍
                    $clemoji.find("#g28").attr("transform", "translate(18.1499,33.7192)");
                    $clemoji.find("#g32").attr("transform", "translate(19.8496,33.7192)");
                }

                if (files[num] === "1f618.svg") // 😘
                    $clemoji.find("#g44").attr("transform", "translate(35.75,9.7783)");

                if (["1f625.svg", "1f630.svg"].indexOf(files[num]) !== -1) //😢 😥
                    $clemoji.find("#g36").attr("transform", "translate(12,8)");

                if (files[num] === "1f62a.svg") // 😪
                    $clemoji.find("#g44").attr("transform", "translate(23,14)");

                if (files[num] === "1f62d.svg") { // 😭
                    $clemoji.css({
                        width: "calc(64px * 44.5 / 42)",
                        "margin": "calc(-64px * (44.5 - 42) / 42 / 2)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 44.5 63");
                    $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,-1.5,62.5)");
                }

                // Hand
                if (files[num] === "1f631.svg") // 😱
                    $clemoji.find("#path42, #path46").css("fill", "#479F00");

                if (files[num] === "263a.svg") // ☺
                    $clemoji.find("#path34, #path38, #path42, #path46, #path54").css("stroke", "#992500");

                if (files[num] === "1f61c.svg") // 😜
                    $clemoji.find("#path34").css("fill", "#992500");
            } else { //v2
                $clemoji.find("svg").html(`<g id="g10" transform="matrix(0.895,0,0,0.895,0,12.6)">${$clemoji.find("svg").html()}
                    <g id="gfeuille" transform="matrix(1,0,0,-1,-1.19,-18) translate(113.91075,-3.4)">
                        <path id="path4138-2" fill="#479F00" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
                        <path id="path4138-2-5" fill="#479F00" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
                    </g>
                </g>`);

                $clemoji.find("svg").attr("viewBox", "0 0 33 47.25");
                $clemoji.find("path, ellipse, circle").each(replaceColor);

                if (["1f92f.svg", "1f973.svg"].indexOf(files[num]) !== -1) // 🤯 🥳
                    $clemoji.find("#gfeuille").remove();

                if (files[num] === "1f913.svg") // 🤓
                    $clemoji.find("path[fill='#595959']").attr("fill", "#ad0dff");

                if (files[num] === "1f975.svg") // 🥵
                    $clemoji.find("#gfeuille path").attr("fill", "#987c37");

                if (files[num] === "1f976.svg") // 🥶
                    $clemoji.find("#gfeuille path").attr("fill", "#b8b800");

                //>> Hand
                if (["1f917.svg", "1f92d.svg"].indexOf(files[num]) !== -1) { // 🤗 🤤
                    $clemoji.find("path[fill='#F4900C']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");
                }

                if (["1f914.svg", "1f92b.svg"].indexOf(files[num]) !== -1) { // 🤔 🤫
                    $clemoji.find("path[fill='#F19020']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");

                    if (files[num] === "1f914.svg") { // 🤔
                        $clemoji.find("#gfeuille").attr("transform", "rotate(10 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    }

                    if (files[num] === "1f92b.svg") { // 🤫
                        const $path = $clemoji.find("path[fill='#992500']"),
                            attrD = $path.attr("d");
                        $path.attr("d", "M22.409 30.743zm-3.259 4.73z" + attrD.substr(757));
                        $clemoji.find("#g10").html(`${$clemoji.find("#g10").html()}
                            <path fill="#3E721D" d="${attrD.substr(0, 757)}"></path>`);
                    }
                }
                //<<

                if (files[num] === "1f643.svg") { // 🙃
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,0,0)");
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,1,-1.19,54) translate(113.91075,-3.4)");
                }

                if (files[num] === "1f923.svg") { // 🤣
                    $clemoji.css({
                        width: "calc(64px * 46 / 36)",
                        "margin-left": "calc(-64px * (46 - 36) / 36)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 42.5 48.3");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,10,13.6)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-45 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                }

                if (files[num] === "1f925.svg") { // 🤥 pinocchio
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,-1,-4.19,-15.5) translate(113.91075,-3.4)");
                }

                if (files[num] === "1f92a.svg") { // 🤪 idiot incliné
                    $clemoji.css({
                        width: "calc(64px * 35 / 33)",
                        "margin-left": "calc(-64px * (35 - 33) / 33)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 35 49.875");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,2.5,15.1)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-18 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    $clemoji.find("ellipse[fill='#595959'], circle[fill='#595959']").attr("fill", "#992500");
                }
            }
            fileN++;
            getSVG(fileN);
        });
    };
    getSVG(fileN);
});

function replaceColor() {
    let attrcss,
        boolRGB = false;

    if ($(this).attr("fill")) {
        attrcss = "attr";
    } else if ($(this).css("fill")) {
        attrcss = "css";
        boolRGB = true;
    } else {
        return;
    }

    const fill = (boolRGB) ? rgb2hex($(this).css("fill")) : $(this).attr("fill");

    if (["#FFCC4D", "#FDCB58", "#FFCB4C"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#FAAC2C");
    } else if (["#664500", "#65471B"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#992500");
    } else if (["#5DADEC", "#64AADD"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#3DAEFF");
        $(this)[attrcss]("fill-opacity", 0.64);
    } else if (["#292F33"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#595959");
    }
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return (rgb) ? "#" + (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase() : null;
}

On n’est même pas censé être capable d’identifier rapidement les smileys v2 des clemojis v3 :

Trouvé ~~Charlie~~ clem v2
Trouvé ~~Charlie~~ clem v2
+2 -0 

👿 😀 😁 😂 😃 😄 😅 😆 😇 😈 😉 😊 😋 😌 😍 
😎 😏   🥴 🥵 🥶 🥺 ☹    😐 😑 😒 😓 😔 😕 😖 
😗 😘 😙 😚 😛 😜 😝 😞 😟 😠 😡 😢 😣 😤 😥
😦 😧 😨 😩 😪 😫 😬 😭 😮 😯 😰 😱 😲 😳 😴
😵 😶 😷 🙁 🙂 ☺  🙃 🙄 🤐 🤑 🤒 🤓 🤔 🤕 🤗
🤢 🤣 🤤 🤥 🤧 🤨 🤩 🤪 🤫 🤬 🤭 🤮 🤯 🥰 🥳

On enlève démon pour mettre diable ? Ou on fait ressembler démon à diable ?

L’ange je pense garder le notre, ensuite les "?" on garde les deux version ? L’emojiv2 et Clemoji v3 ?

Pour :soleil: on garde les deux ? Ou seulement la notre ?

Pour :( ?

Les colères, je vais les faire moins rouge comme ça :

👿 😀 😁 😂 😃 😄 😅 😆 
😇 😈 😉 😊 😋 😌 😍 😎 
😏 😐 😑 😒 😓 😔 😕 😖 
😗 😘 😙 😚 😛 😜 😝 😞 
😟 😠 😡 😢 😣 😤 😥 😦 
😧 😨 😩 😪 😫 😬 😭 😮 
😯 😰 😱 😲 😳 😴 😵 😶 
😷 🙁 🙂 ☺ 🙃 🙄 🤐 🤑 
🤒 🤓 🤔 🤕 🤗 🤢 🤣 🤤 
🤥 🤧 🤨 🤩 🤪 🤫 🤬 🤭 
🤮 🤯 🥰 🥳 🥴 🥵 🥶 🥺 
☹

EDIT :

Le code le plus récent :

const files = `1f47f.svg  1f600.svg  1f601.svg  1f602.svg  1f603.svg  1f604.svg  1f605.svg  1f606.svg
1f607.svg  1f608.svg  1f609.svg  1f60a.svg  1f60b.svg  1f60c.svg  1f60d.svg  1f60e.svg
1f60f.svg  1f610.svg  1f611.svg  1f612.svg  1f613.svg  1f614.svg  1f615.svg  1f616.svg
1f617.svg  1f618.svg  1f619.svg  1f61a.svg  1f61b.svg  1f61c.svg  1f61d.svg  1f61e.svg
1f61f.svg  1f620.svg  1f621.svg  1f622.svg  1f623.svg  1f624.svg  1f625.svg  1f626.svg
1f627.svg  1f628.svg  1f629.svg  1f62a.svg  1f62b.svg  1f62c.svg  1f62d.svg  1f62e.svg
1f62f.svg  1f630.svg  1f631.svg  1f632.svg  1f633.svg  1f634.svg  1f635.svg  1f636.svg
1f637.svg  1f641.svg  1f642.svg  263a.svg  1f643.svg  1f644.svg  1f910.svg  1f911.svg
1f912.svg  1f913.svg  1f914.svg  1f915.svg  1f917.svg  1f922.svg  1f923.svg  1f924.svg
1f925.svg  1f927.svg  1f928.svg  1f929.svg  1f92a.svg  1f92b.svg  1f92c.svg  1f92d.svg
1f92e.svg  1f92f.svg  1f970.svg  1f973.svg  1f974.svg  1f975.svg  1f976.svg  1f97a.svg
2639.svg`.replace(/\n/g, "  ").split("  ");

$(window).on("load", function() {
    let fileN = 0;

    function getSVG(num) {
        if (!files[num])
            return;

        $.get("svg/" + files[num], function(data) {
            const $clemoji = $("<div></div>")
                .attr("id", files[num].split(".")[0])
                .appendTo("body")
                .append(new XMLSerializer().serializeToString(data.documentElement));

            if (fileN < 60) {
                $clemoji.find("#g14").html(`${$clemoji.find("#g14").html()}<g id="gfeuille" transform="translate(113.91075,50.659)">
                    <path id="path4138-2" style="fill:#479F00;" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
                    <path id="path4138-2-5" style="fill:#479F00;" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
                </g>`);

                $clemoji.find("metadata").remove();
                $clemoji.find("#path18").attr("d", "M 0,58 38,58 38,0 0,0 0,38 Z");
                $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,-2.5,62.5)");
                $clemoji.find("svg").attr("viewBox", "0 0 42.5 63")
                                    .css("enable-background", "0 0 42.5 63");
                $clemoji.find("path").each(replaceColor);

                if (["1f47f.svg", "1f608.svg"].indexOf(files[num]) !== -1) { // 👿 😈
                    $clemoji.find("#gfeuille").remove();
                    $clemoji.find("#g10").attr("transform", "matrix(1.18,0,0,-1.18,-1.2,61.2)");
                }

                if (files[num] === "1f60d.svg") { // 😍
                    $clemoji.find("#g28").attr("transform", "translate(18.1499,33.7192)");
                    $clemoji.find("#g32").attr("transform", "translate(19.8496,33.7192)");
                }

                if (files[num] === "1f618.svg") // 😘
                    $clemoji.find("#g44").attr("transform", "translate(35.75,9.7783)");

                if (["1f625.svg", "1f630.svg"].indexOf(files[num]) !== -1) //😢 😥
                    $clemoji.find("#g36").attr("transform", "translate(12,8)");

                if (files[num] === "1f62a.svg") // 😪
                    $clemoji.find("#g44").attr("transform", "translate(23,14)");

                if (files[num] === "1f62d.svg") { // 😭
                    $clemoji.css({
                        width: "calc(48px * 44.5 / 42)",
                        "margin": "calc(-48px * (44.5 - 42) / 42 / 2)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 44.5 63");
                    $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,-1.5,62.5)");
                }

                // Hand
                if (files[num] === "1f631.svg") // 😱
                    $clemoji.find("#path42, #path46").css("fill", "#479F00");

                if (files[num] === "263a.svg") // ☺
                    $clemoji.find("#path34, #path38, #path42, #path46, #path54").css("stroke", "#992500");

                if (files[num] === "1f61c.svg") // 😜
                    $clemoji.find("#path34").css("fill", "#992500");

                if (files[num] === "1f621.svg") { // 😡
                    $clemoji.find("#path26, #path30, #path34").css("fill", "#992500");
                    $clemoji.find("#path22").css("fill", "#f98634");
                }
            } else { //v2
                $clemoji.find("svg").html(`<g id="g10" transform="matrix(0.895,0,0,0.895,0,12.6)">${$clemoji.find("svg").html()}
                    <g id="gfeuille" transform="matrix(1,0,0,-1,-1.19,-18) translate(113.91075,-3.4)">
                        <path id="path4138-2" fill="#479F00" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
                        <path id="path4138-2-5" fill="#479F00" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
                    </g>
                </g>`);

                $clemoji.find("svg").attr("viewBox", "0 0 33 47.25");
                $clemoji.find("path, ellipse, circle").each(replaceColor);

                if (["1f92f.svg", "1f973.svg"].indexOf(files[num]) !== -1) // 🤯 🥳
                    $clemoji.find("#gfeuille").remove();

                if (files[num] === "1f913.svg") // 🤓
                    $clemoji.find("path[fill='#595959']").attr("fill", "#ad0dff");

                if (files[num] === "1f975.svg") // 🥵
                    $clemoji.find("#gfeuille path").attr("fill", "#987c37");

                if (files[num] === "1f976.svg") // 🥶
                    $clemoji.find("#gfeuille path").attr("fill", "#b8b800");

                //>> Hand
                if (["1f917.svg", "1f92d.svg"].indexOf(files[num]) !== -1) { // 🤗 🤤
                    $clemoji.find("path[fill='#F4900C']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");
                }

                if (["1f914.svg", "1f92b.svg"].indexOf(files[num]) !== -1) { // 🤔 🤫
                    $clemoji.find("path[fill='#F19020']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");

                    if (files[num] === "1f914.svg") { // 🤔
                        $clemoji.find("#gfeuille").attr("transform", "rotate(10 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    }

                    if (files[num] === "1f92b.svg") { // 🤫
                        const $path = $clemoji.find("path[fill='#992500']"),
                            attrD = $path.attr("d");
                        $path.attr("d", "M22.409 30.743zm-3.259 4.73z" + attrD.substr(757));
                        $clemoji.find("#g10").html(`${$clemoji.find("#g10").html()}
                            <path fill="#3E721D" d="${attrD.substr(0, 757)}"></path>`);
                    }
                }
                //<<

                if (files[num] === "1f92c.svg") { // 🤬
                    $clemoji.find("path[fill='#595959']").attr("fill", "#992500");
                    $clemoji.find("path[fill='#DA2F47']").attr("fill", "#f98634");
                }

                if (files[num] === "1f643.svg") { // 🙃
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,0,0)");
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,1,-1.19,54) translate(113.91075,-3.4)");
                }

                if (files[num] === "1f923.svg") { // 🤣
                    $clemoji.css({
                        width: "calc(48px * 46 / 36)",
                        "margin-left": "calc(-48px * (46 - 36) / 36)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 42.5 48.3");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,10,13.6)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-45 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                }

                if (files[num] === "1f925.svg") { // 🤥 pinocchio
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,-1,-4.19,-15.5) translate(113.91075,-3.4)");
                }

                if (files[num] === "1f92a.svg") { // 🤪 idiot incliné
                    $clemoji.css({
                        width: "calc(48px * 35 / 33)",
                        "margin-left": "calc(-48px * (35 - 33) / 33)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 35 49.875");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,2.5,15.1)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-18 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    $clemoji.find("ellipse[fill='#595959'], circle[fill='#595959']").attr("fill", "#992500");
                }
            }
            fileN++;
            getSVG(fileN);
        });
    };
    getSVG(fileN);
});

function replaceColor() {
    let attrcss,
        boolRGB = false;

    if ($(this).attr("fill")) {
        attrcss = "attr";
    } else if ($(this).css("fill")) {
        attrcss = "css";
        boolRGB = true;
    } else {
        return;
    }

    const fill = (boolRGB) ? rgb2hex($(this).css("fill")) : $(this).attr("fill");

    if (["#FFCC4D", "#FDCB58", "#FFCB4C"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#FAAC2C");
    } else if (["#664500", "#65471B"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#992500");
    } else if (["#5DADEC", "#64AADD"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#3DAEFF");
        $(this)[attrcss]("fill-opacity", 0.64);
    } else if (["#292F33"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#595959");
    }
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return (rgb) ? "#" + (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase() : null;
}

Dernière Nouvelle version :

ancienne image

const files = `1f47f.svg  1f600.svg  1f601.svg  1f602.svg  1f603.svg  1f604.svg  1f605.svg  1f606.svg
1f607.svg  1f608.svg  1f609.svg  1f60a.svg  1f60b.svg  1f60c.svg  1f60d.svg  1f60e.svg
1f60f.svg  1f610.svg  1f611.svg  1f612.svg  1f613.svg  1f614.svg  1f615.svg  1f616.svg
1f617.svg  1f618.svg  1f619.svg  1f61a.svg  1f61b.svg  1f61c.svg  1f61d.svg  1f61e.svg
1f61f.svg  1f620.svg  1f621.svg  1f622.svg  1f623.svg  1f624.svg  1f625.svg  1f626.svg
1f627.svg  1f628.svg  1f629.svg  1f62a.svg  1f62b.svg  1f62c.svg  1f62d.svg  1f62e.svg
1f62f.svg  1f630.svg  1f631.svg  1f632.svg  1f633.svg  1f634.svg  1f635.svg  1f636.svg
1f637.svg  1f641.svg  1f642.svg  263a.svg  1f643.svg  1f644.svg  1f910.svg  1f911.svg
1f912.svg  1f913.svg  1f914.svg  1f915.svg  1f917.svg  1f922.svg  1f923.svg  1f924.svg
1f925.svg  1f927.svg  1f928.svg  1f929.svg  1f92a.svg  1f92b.svg  1f92c.svg  1f92d.svg
1f92e.svg  1f92f.svg  1f970.svg  1f973.svg  1f974.svg  1f975.svg  1f976.svg  1f97a.svg
2639.svg`.replace(/\n/g, "  ").split("  ");

const gfeuilleTristePATHS = `
<path id="path4138-2" fill="#479F00" d="M35.842,42.028c-7.072,2.898-15.156-0.481-18.056-7.555c-0.056-0.147-0.112-0.295-0.166-0.445c0.273-0.141,0.552-0.27,0.833-0.391c7.072-2.902,15.156,0.48,18.056,7.552c0.002,0,0.002,0,0.002,0.002c0.058,0.147,0.112,0.295,0.164,0.444C36.402,41.775,36.123,41.906,35.842,42.028L35.842,42.028z"/>
<path id="path4138-2-5" fill="#479F00" d="M5.883,38.317c5.113,2.886,11.597,1.081,14.484-4.03c0.058-0.106,0.112-0.214,0.167-0.325c-0.195-0.131-0.394-0.258-0.597-0.377c-5.111-2.888-11.596-1.084-14.482,4.03c-0.002,0-0.002,0-0.002,0c-0.058,0.106-0.112,0.214-0.166,0.322C5.482,38.07,5.68,38.197,5.883,38.317z"/>
`.replace("\n", "");

const gfeuillePATHS = `
<path id="path4138-2" fill="#479F00" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
<path id="path4138-2-5" fill="#479F00" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
`.replace("\n", "");

$(window).on("load", function() {
    let fileN = 0;

    function getSVG(num) {
        if (!files[num])
            return;

        $.get("svg/" + files[num], function(data) {
            const $clemoji = $("<div></div>")
                .attr("id", files[num].split(".")[0])
                .appendTo("body")
                .append(new XMLSerializer().serializeToString(data.documentElement));

            if (fileN < 60) {
                if (["1f610", "1f611", "1f612", "1f613", "1f614", "1f615", "1f616", "1f61e", "1f61e", "1f61f", "1f620",
                     "1f621", "1f622", "1f623", "1f624", "1f625", "1f626", "1f627", "1f628", "1f629", "1f62a", "1f62b",
                     "1f630", "1f632", "1f635", "1f641"].indexOf(files[num].split(".")[0]) !== -1) { // triste
                    $clemoji.find("#g14").html(`<g id="gfeuille" transform="translate(0,1)">${gfeuilleTristePATHS}</g>
                        ${$clemoji.find("#g14").html()}`);
                } else {
                    $clemoji.find("#g14").html(`${$clemoji.find("#g14").html()}
                        <g id="gfeuille" transform="translate(113.91075,50.659)">${gfeuillePATHS}</g>`);
                }

                $clemoji.find("#g14").removeAttr("clip-path");
                $clemoji.find("#g10").html($clemoji.find("#g14").html());
                
                $clemoji.find("defs").remove();
                $clemoji.find("metadata").remove();
                $clemoji.find("#path18").attr("d", "M 0,58 38,58 38,0 0,0 0,38 Z");
                $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,-2.5,62.5)");
                $clemoji.find("svg").attr("viewBox", "0 0 42.5 63");
                $clemoji.find("path").each(replaceColor);

                if (["1f47f.svg", "1f608.svg"].indexOf(files[num]) !== -1) { // 👿 😈
                    $clemoji.find("#gfeuille").remove();
                    $clemoji.find("#g10").attr("transform", "matrix(1.18,0,0,-1.18,-1.2,61.2)");
                }

                if (files[num] === "1f60d.svg") { // 😍
                    $clemoji.find("#g28").attr("transform", "translate(18.1499,33.7192)");
                    $clemoji.find("#g32").attr("transform", "translate(19.8496,33.7192)");
                }

                if (files[num] === "1f618.svg") // 😘
                    $clemoji.find("#g44").attr("transform", "translate(35.75,9.7783)");

                if (["1f625.svg", "1f630.svg"].indexOf(files[num]) !== -1) //😢 😥
                    $clemoji.find("#g36").attr("transform", "translate(12,8)");

                if (files[num] === "1f62a.svg") // 😪
                    $clemoji.find("#g44").attr("transform", "translate(23,14)");

                if (files[num] === "1f62d.svg") { // 😭
                    $clemoji.css({
                        width: "calc(48px * 44.5 / 42)",
                        "margin": "calc(-48px * (44.5 - 42) / 42 / 2)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 44.5 63");
                    $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,-1.5,62.5)");
                }

                // Hand
                if (files[num] === "1f631.svg") // 😱
                    $clemoji.find("#path42, #path46").css("fill", "#479F00");

                if (files[num] === "263a.svg") // ☺
                    $clemoji.find("#path34, #path38, #path42, #path46, #path54").css("stroke", "#992500");

                if (files[num] === "1f61c.svg") // 😜
                    $clemoji.find("#path34").css("fill", "#992500");

                if (files[num] === "1f621.svg") { // 😡
                    $clemoji.find("#path26, #path30, #path34").css("fill", "#992500");
                    $clemoji.find("#path22").css("fill", "#f98634");
                }
            } else { //v2
                if (["1f644", "1f912", "1f915", "1f925", "1f927", "1f92c", "1f92e", "1f974",
                     "1f97a", "2639", "1f975", "1f976"].indexOf(files[num].split(".")[0]) !== -1) { // triste
                    //113.91075,50.659
                    $clemoji.find("svg").html(`<g id="g10" transform="matrix(0.895,0,0,0.895,0,12.6)">
                        <g id="gfeuille" transform="matrix(1.03,0,0,-1.03,-1.7,-20) translate(0,-54.049)">${gfeuilleTristePATHS}</g>
                        ${$clemoji.find("svg").html()}
                    </g>`);
                } else {
                    $clemoji.find("svg").html(`<g id="g10" transform="matrix(0.895,0,0,0.895,0,12.6)">
                        ${$clemoji.find("svg").html()}
                        <g id="gfeuille" transform="matrix(1,0,0,-1,-1.19,-18) translate(113.91075,-3.4)">${gfeuillePATHS}</g>
                    </g>`);
                }

                $clemoji.find("svg").attr("viewBox", "0 0 33 47.25");
                $clemoji.find("path, ellipse, circle").each(replaceColor);

                if (["1f92f.svg", "1f973.svg"].indexOf(files[num]) !== -1) // 🤯 🥳
                    $clemoji.find("#gfeuille").remove();

                if (files[num] === "1f913.svg") // 🤓
                    $clemoji.find("path[fill='#595959']").attr("fill", "#ad0dff");

                if (files[num] === "1f975.svg") // 🥵
                    $clemoji.find("#gfeuille path").attr("fill", "#987c37");

                if (files[num] === "1f976.svg") // 🥶
                    $clemoji.find("#gfeuille path").attr("fill", "#b8b800");

                //>> Hand
                if (["1f917.svg", "1f92d.svg"].indexOf(files[num]) !== -1) { // 🤗 🤤
                    $clemoji.find("path[fill='#F4900C']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");
                }

                if (["1f914.svg", "1f92b.svg"].indexOf(files[num]) !== -1) { // 🤔 🤫
                    $clemoji.find("path[fill='#F19020']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");

                    if (files[num] === "1f914.svg") { // 🤔
                        $clemoji.find("#gfeuille").attr("transform", "rotate(10 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    }

                    if (files[num] === "1f92b.svg") { // 🤫
                        const $path = $clemoji.find("path[fill='#992500']"),
                            attrD = $path.attr("d");
                        $path.attr("d", "M22.409 30.743zm-3.259 4.73z" + attrD.substr(757));
                        $clemoji.find("#g10").html(`${$clemoji.find("#g10").html()}
                            <path fill="#3E721D" d="${attrD.substr(0, 757)}"></path>`);
                    }
                }
                //<<

                if (files[num] === "1f92c.svg") { // 🤬
                    $clemoji.find("path[fill='#595959']").attr("fill", "#992500");
                    $clemoji.find("path[fill='#DA2F47']").attr("fill", "#f98634");
                }

                if (files[num] === "1f643.svg") { // 🙃
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,0,0)");
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,1,-1.19,54) translate(113.91075,-3.4)");
                }

                if (files[num] === "1f923.svg") { // 🤣
                    $clemoji.css({
                        width: "calc(48px * 46 / 36)",
                        "margin-left": "calc(-48px * (46 - 36) / 36)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 42.5 48.3");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,10,13.6)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-45 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                }

                if (files[num] === "1f925.svg") { // 🤥 pinocchio
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,-1,-4,-17.5) translate(0,-54.049)");
                }

                if (files[num] === "1f92a.svg") { // 🤪 idiot incliné
                    $clemoji.css({
                        width: "calc(48px * 35 / 33)",
                        "margin-left": "calc(-48px * (35 - 33) / 33)"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 35 49.875");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,2.5,15.1)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-18 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    $clemoji.find("ellipse[fill='#595959'], circle[fill='#595959']").attr("fill", "#992500");
                }
            }

            $clemoji.find("svg").attr("style", "enable-background: new " + $clemoji.find("svg").attr("viewBox"));
            fileN++;
            getSVG(fileN);
        });
    };
    getSVG(fileN);
});

function replaceColor() {
    let attrcss,
        boolRGB = false;

    if ($(this).attr("fill")) {
        attrcss = "attr";
    } else if ($(this).css("fill")) {
        attrcss = "css";
        boolRGB = true;
    } else {
        return;
    }

    const fill = (boolRGB) ? rgb2hex($(this).css("fill")) : $(this).attr("fill");

    if (["#FFCC4D", "#FDCB58", "#FFCB4C"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#FAAC2C");
    } else if (["#664500", "#65471B"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#992500");
    } else if (["#5DADEC", "#64AADD"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#3DAEFF");
        $(this)[attrcss]("fill-opacity", 0.64);
    } else if (["#292F33"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#595959");
    }
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return (rgb) ? "#" + (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase() : null;
}

Dernière version :

const files = `1f47f.svg  1f600.svg  1f601.svg  1f602.svg  1f603.svg  1f604.svg  1f605.svg  1f606.svg
1f607.svg  1f608.svg  1f609.svg  1f60a.svg  1f60b.svg  1f60c.svg  1f60d.svg  1f60e.svg
1f60f.svg  1f610.svg  1f611.svg  1f612.svg  1f613.svg  1f614.svg  1f615.svg  1f616.svg
1f617.svg  1f618.svg  1f619.svg  1f61a.svg  1f61b.svg  1f61c.svg  1f61d.svg  1f61e.svg
1f61f.svg  1f620.svg  1f621.svg  1f622.svg  1f623.svg  1f624.svg  1f625.svg  1f626.svg
1f627.svg  1f628.svg  1f629.svg  1f62a.svg  1f62b.svg  1f62c.svg  1f62d.svg  1f62e.svg
1f62f.svg  1f630.svg  1f631.svg  1f632.svg  1f633.svg  1f634.svg  1f635.svg  1f636.svg
1f637.svg  1f641.svg  1f642.svg  263a.svg  1f643.svg  1f644.svg  1f910.svg  1f911.svg
1f912.svg  1f913.svg  1f914.svg  1f915.svg  1f917.svg  1f922.svg  1f923.svg  1f924.svg
1f925.svg  1f927.svg  1f928.svg  1f929.svg  1f92a.svg  1f92b.svg  1f92c.svg  1f92d.svg
1f92e.svg  1f92f.svg  1f970.svg  1f973.svg  1f974.svg  1f975.svg  1f976.svg  1f97a.svg
2639.svg`.replace(/\n/g, "  ").split("  ");

const gfeuilleTristePATHS = `
<path id="path4138-2" fill="#479F00" d="M35.842,42.028c-7.072,2.898-15.156-0.481-18.056-7.555c-0.056-0.147-0.112-0.295-0.166-0.445c0.273-0.141,0.552-0.27,0.833-0.391c7.072-2.902,15.156,0.48,18.056,7.552c0.002,0,0.002,0,0.002,0.002c0.058,0.147,0.112,0.295,0.164,0.444C36.402,41.775,36.123,41.906,35.842,42.028L35.842,42.028z"/>
<path id="path4138-2-5" fill="#479F00" d="M5.883,38.317c5.113,2.886,11.597,1.081,14.484-4.03c0.058-0.106,0.112-0.214,0.167-0.325c-0.195-0.131-0.394-0.258-0.597-0.377c-5.111-2.888-11.596-1.084-14.482,4.03c-0.002,0-0.002,0-0.002,0c-0.058,0.106-0.112,0.214-0.166,0.322C5.482,38.07,5.68,38.197,5.883,38.317z"/>
`.replace("\n", "");

const gfeuillePATHS = `
<path id="path4138-2" fill="#479F00" d="M-80.758-0.674c-7.478-0.001-13.541-6.064-13.539-13.541c0.003-0.155,0.009-0.31,0.017-0.464c0.297-0.026,0.597-0.041,0.897-0.045c7.478-0.001,13.541,6.062,13.542,13.54c0,0.001,0,0.001,0,0.002c-0.005,0.154-0.009,0.308-0.017,0.462C-80.156-0.696-80.458-0.68-80.758-0.674L-80.758-0.674z"></path>
<path id="path4138-2-5" fill="#479F00" d="M-106.123-3.933c5.744,0,10.4-4.658,10.4-10.402c-0.003-0.12-0.006-0.238-0.013-0.357c-0.23-0.02-0.461-0.03-0.691-0.034c-5.745-0.001-10.402,4.656-10.402,10.4c0,0.002,0,0.002,0,0.002c0.002,0.119,0.006,0.237,0.013,0.355C-106.584-3.949-106.355-3.937-106.123-3.933L-106.123-3.933z"></path>
`.replace("\n", "");

$(window).on("load", function() {
    let fileN = 0;

    function getSVG(num) {
        if (!files[num])
            return;

        $.get("svg/" + files[num], function(data) {
            const $clemoji = $("<div></div>")
                .attr("id", files[num].split(".")[0])
                .appendTo("body")
                .append(new XMLSerializer().serializeToString(data.documentElement));

            if (fileN < 60) {
                if (["1f610", "1f611", "1f612", "1f613", "1f614", "1f615", "1f616", "1f61e", "1f61e", "1f61f", "1f620",
                     "1f621", "1f622", "1f623", "1f624", "1f625", "1f626", "1f627", "1f628", "1f629", "1f62a", "1f62b",
                     "1f630", "1f632", "1f635", "1f641"].indexOf(files[num].split(".")[0]) !== -1) { // triste
                    $clemoji.find("#g14").html(`<g id="gfeuille" transform="translate(0,1)">${gfeuilleTristePATHS}</g>
                        ${$clemoji.find("#g14").html()}`);
                } else {
                    $clemoji.find("#g14").html(`${$clemoji.find("#g14").html()}
                        <g id="gfeuille" transform="translate(113.91075,50.659)">${gfeuillePATHS}</g>`);
                }

                $clemoji.find("#g14").removeAttr("clip-path");
                $clemoji.find("#g10").html($clemoji.find("#g14").html());
                
                $clemoji.find("defs").remove();
                $clemoji.find("metadata").remove();
                $clemoji.find("#path18").attr("d", "M 0,58 38,58 38,0 0,0 0,38 Z");
                $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,-2.5,62.5)");
                $clemoji.find("svg").attr("viewBox", "0 0 42.5 63");
                $clemoji.find("path").each(replaceColor);

                if (["1f47f.svg", "1f608.svg"].indexOf(files[num]) !== -1) { // 👿 😈
                    $clemoji.find("#gfeuille").remove();
                    $clemoji.find("#g10").attr("transform", "matrix(1.18,0,0,-1.18,-1.2,61.2)");
                }

                if (files[num] === "1f60d.svg") { // 😍
                    $clemoji.find("#g28").attr("transform", "translate(18.1499,33.7192)");
                    $clemoji.find("#g32").attr("transform", "translate(19.8496,33.7192)");
                }

                if (files[num] === "1f618.svg") // 😘
                    $clemoji.find("#g44").attr("transform", "translate(35.75,9.7783)");

                if (["1f625.svg", "1f630.svg"].indexOf(files[num]) !== -1) //😢 😥
                    $clemoji.find("#g36").attr("transform", "translate(12,8)");

                if (files[num] === "1f62a.svg") // 😪
                    $clemoji.find("#g44").attr("transform", "translate(23,14)");

                if (files[num] === "1f62d.svg") { // 😭
                    $clemoji.css({
                        width: "calc(48px * 44.5 / 42)",
                        "margin": "calc(-48px * (44.5 - 42) / 42 / 2)",
                        "border-bottom": "2px solid #ed4ad5",
                        "margin-bottom": "-2px"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 44.5 63");
                    $clemoji.find("#g10").attr("transform", "matrix(1.25,0,0,-1.25,-1.5,62.5)");
                }

                // Hand
                if (files[num] === "1f631.svg") // 😱
                    $clemoji.find("#path42, #path46").css("fill", "#479F00");

                if (files[num] === "263a.svg") { // ☺
                    $clemoji.find("#path34, #path38, #path42, #path46, #path54").css("stroke", "#992500");
                    // Transplantation
                    let $1f642 = $("#1f642");
                    $clemoji.find("#g20").attr("transform", $1f642.find("#g20").attr("transform"));
                    $clemoji.find("#path22").attr("d", $1f642.find("#path22").attr("d"));
                }


                if (files[num] === "1f61c.svg") // 😜
                    $clemoji.find("#path34").css("fill", "#992500");

                if (files[num] === "1f621.svg") { // 😡
                    $clemoji.find("#path26, #path30, #path34").css("fill", "#992500");
                    $clemoji.find("#path22").css("fill", "#f98634");
                }
            } else { //v2
                if (["1f644", "1f912", "1f915", "1f925", "1f927", "1f92c", "1f92e", "1f974",
                     "1f97a", "2639", "1f975", "1f976"].indexOf(files[num].split(".")[0]) !== -1) { // triste
                    //113.91075,50.659
                    $clemoji.find("svg").html(`<g id="g10" transform="matrix(0.895,0,0,0.895,0,12.6)">
                        <g id="gfeuille" transform="matrix(1.03,0,0,-1.03,-1.7,-20) translate(0,-54.049)">${gfeuilleTristePATHS}</g>
                        ${$clemoji.find("svg").html()}
                    </g>`);
                } else {
                    $clemoji.find("svg").html(`<g id="g10" transform="matrix(0.895,0,0,0.895,0,12.6)">
                        ${$clemoji.find("svg").html()}
                        <g id="gfeuille" transform="matrix(1,0,0,-1,-1.19,-18) translate(113.91075,-3.4)">${gfeuillePATHS}</g>
                    </g>`);
                }

                $clemoji.find("svg").attr("viewBox", "0 0 33 47.25");
                $clemoji.find("path, ellipse, circle").each(replaceColor);

                if (["1f92f.svg", "1f973.svg"].indexOf(files[num]) !== -1) // 🤯 🥳
                    $clemoji.find("#gfeuille").remove();

                if (files[num] === "1f913.svg") // 🤓
                    $clemoji.find("path[fill='#595959']").attr("fill", "#ad0dff");

                if (files[num] === "1f975.svg") // 🥵
                    $clemoji.find("#gfeuille path").attr("fill", "#987c37");

                if (files[num] === "1f976.svg") // 🥶
                    $clemoji.find("#gfeuille path").attr("fill", "#b8b800");

                //>> Hand
                if (["1f917.svg", "1f92d.svg"].indexOf(files[num]) !== -1) { // 🤗 🤤
                    $clemoji.find("path[fill='#F4900C']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");
                }

                if (["1f914.svg", "1f92b.svg"].indexOf(files[num]) !== -1) { // 🤔 🤫
                    $clemoji.find("path[fill='#F19020']").attr("fill", "#479F00");
                    $clemoji.find("path[fill='#B55005']").attr("fill", "#3E721D");

                    if (files[num] === "1f914.svg") { // 🤔
                        $clemoji.find("#gfeuille").attr("transform", "rotate(10 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    }

                    if (files[num] === "1f92b.svg") { // 🤫
                        const $path = $clemoji.find("path[fill='#992500']"),
                            attrD = $path.attr("d");
                        $path.attr("d", "M22.409 30.743zm-3.259 4.73z" + attrD.substr(757));
                        $clemoji.find("#g10").html(`${$clemoji.find("#g10").html()}
                            <path fill="#3E721D" d="${attrD.substr(0, 757)}"></path>`);
                    }
                }
                //<<

                if (files[num] === "1f92c.svg") { // 🤬
                    $clemoji.find("path[fill='#595959']").attr("fill", "#992500");
                    $clemoji.find("path[fill='#DA2F47']").attr("fill", "#f98634");
                }

                if (files[num] === "1f643.svg") { // 🙃
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,0,0)");
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,1,-1.19,54) translate(113.91075,-3.4)");
                }

                if (files[num] === "1f923.svg") { // 🤣
                    $clemoji.css({
                        width: "calc(48px * 46 / 36)",
                        "margin-left": "calc(-48px * (46 - 36) / 36)",
                        "border-bottom": "2px solid #ed4ad5",
                        "margin-bottom": "-2px"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 42.5 48.3");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,10,13.6)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-45 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                }

                if (files[num] === "1f925.svg") { // 🤥 pinocchio
                    $clemoji.find("#gfeuille").attr("transform", "matrix(1,0,0,-1,-4,-17.5) translate(0,-54.049)");
                }

                if (files[num] === "1f92a.svg") { // 🤪 idiot incliné
                    $clemoji.css({
                        width: "calc(48px * 35 / 33)",
                        "margin-left": "calc(-48px * (35 - 33) / 33)",
                        "border-bottom": "2px solid #ed4ad5",
                        "margin-bottom": "-2px"
                    });
                    $clemoji.find("svg").attr("viewBox", "0 0 35 49.875");
                    $clemoji.find("#g10").attr("transform", "matrix(0.895,0,0,0.895,2.5,15.1)");
                    $clemoji.find("#gfeuille").attr("transform", "rotate(-18 18 18)" + $clemoji.find("#gfeuille").attr("transform"));
                    $clemoji.find("ellipse[fill='#595959'], circle[fill='#595959']").attr("fill", "#992500");
                }
            }

            $clemoji.find("svg").attr("style", "enable-background: new " + $clemoji.find("svg").attr("viewBox"));
            $clemoji.find("svg").attr("width", $clemoji.find("svg").width()+"px");
            //$clemoji.find("svg").attr("height", $clemoji.find("svg").height()+"px");
            fileN++;
            getSVG(fileN);
        });
    };
    getSVG(fileN);
});

function replaceColor() {
    let attrcss,
        boolRGB = false;

    if ($(this).attr("fill")) {
        attrcss = "attr";
    } else if ($(this).css("fill")) {
        attrcss = "css";
        boolRGB = true;
    } else {
        return;
    }

    const fill = (boolRGB) ? rgb2hex($(this).css("fill")) : $(this).attr("fill");

    if (["#FFCC4D", "#FDCB58", "#FFCB4C"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#FAAC2C");
    } else if (["#664500", "#65471B"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#992500");
    } else if (["#5DADEC", "#64AADD"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#3DAEFF");
        $(this)[attrcss]("fill-opacity", 0.64);
    } else if (["#292F33"].indexOf(fill) !== -1) {
        $(this)[attrcss]("fill", "#595959");
    }
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return (rgb) ? "#" + (hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])).toUpperCase() : null;
}

HTML :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="language" content="fr">
    <title>SVG</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/convert.js"></script>
    <style>
    html, body {
        display:inline-block;
    }
    svg {
        /*background-color:pink;*/
    }
    div {
        width:48px;
        display:inline-block;
    }
    </style>
</head>
<body>
</body>
</html>
+2 -0

Tout est prêt côté front-end, il ne manque plus que le back-end !

Le dossier avec tous les svg des Clemoji : https://github.com/A-312/documents-communication/blob/clemoji/emoticones/clemoji/README.md

L’issue : https://github.com/zestedesavoir/zds-site/issues/5069

Je m’occuperai de la génération des svg des emoji v2 lorsque la PR des Clemoji v3 sera prête. Pour palier aux éventuels soucis d’alignements.

EDIT : Je vais peut-être le faire plus tôt (ref screen), la différence de qualité avec les emoji v2 pique sur mobile.

+4 -0

J’peux faire mon relou ? Il n’existe pas de neko-clémentine. Tu t’es battu pour ":B" et bien j’aimerais me battre pour ":3" (dans ces versions il y a bien un smiley qui y ressemble, mais c’est pour que les lèvres fassent un bisous. Dans le cas du neko ":3" ce sont des babines de chat)

+5 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte