search

airtame / airtame-icons

Iconography for the Airtame brand
0 stars 0 forks source link

FIX SVGO to optimize SVG markup correctly #11

Closed noahlaux closed 6 years ago

agjs commented 6 years ago

@noahlaux I believe @mmellado has already implemented either this package or the similar one. Our svg's are already being optimized.

noahlaux commented 6 years ago

yes, I was just in there with @madshensel but it seems like it's not doing enough, take fx this guy https://github.com/airtame/airtame-icons/blob/master/src/icons/icon-audio-off.svg?short_path=4037751. It should be totally stripped like

<?xml version="1.0" encoding="UTF-8"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>icon-audio-off</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Icons-for-Github" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icon-audio-off" fill="#000000">
            <path d="M57.28571,54.8147951 L39.2422175,72.8582876 L37.55357,71.16964 L25.857143,71.16964 C25.083329,71.16964 24.413693,70.8869 23.8482143,70.32143 C23.2827353,69.75595 23,69.08631 23,68.3125 L23,51.16964 C23,50.39583 23.2827353,49.72619 23.8482143,49.16071 C24.413693,48.59523 25.083329,48.3125 25.857143,48.3125 L37.55357,48.3125 L52.41964,33.44643 C52.98512,32.88095 53.65476,32.59821 54.42857,32.59821 C55.20238,32.59821 55.87202,32.88095 56.4375,33.44643 C57.00298,34.0119 57.28571,34.68154 57.28571,35.45535 L57.28571,54.8147951 Z M57.28571,74.6137849 L57.28571,84.026783 C57.28571,84.800596 57.00298,85.470232 56.4375,86.035711 C55.87202,86.60119 55.20238,86.883926 54.42857,86.883926 C53.65476,86.883926 52.98512,86.60119 52.41964,86.035711 L49.1417121,82.7577829 L57.28571,74.6137849 Z M63.6120819,68.287413 L74.2420645,57.6574304 C74.3664018,58.3373466 74.42857,59.0318923 74.42857,59.74107 C74.42857,62.00298 73.79614,64.10862 72.53125,66.05803 C71.26636,68.00745 69.59227,69.3988 67.50893,70.23214 C67.21131,70.38095 66.83929,70.45535 66.39286,70.45535 C65.61904,70.45535 64.94941,70.18006 64.38393,69.62946 C63.9881297,69.2440747 63.730847,68.7967303 63.6120819,68.287413 Z M78.8035825,53.0959125 L83.0790089,48.820486 C84.9311026,52.2046622 85.85714,55.8448255 85.85714,59.74107 C85.85714,64.29466 84.59227,68.49849 82.0625,72.35268 C79.53273,76.20686 76.18454,79.01189 72.01786,80.76785 C71.63095,80.91666 71.25893,80.99107 70.90179,80.99107 C70.09821,80.99107 69.41369,80.70833 68.84821,80.14285 C68.28274,79.57738 68,78.90774 68,78.13393 C68,76.97321 68.58035,76.09524 69.74107,75.5 C71.40775,74.6369 72.53869,73.98214 73.13393,73.53571 C75.33632,71.92856 77.05505,69.91221 78.29018,67.4866 C79.5253,65.061 80.14286,62.47918 80.14286,59.74107 C80.14286,57.4130539 79.6964342,55.1980178 78.8035825,53.0959125 Z M68.7907878,43.3097173 C68.2635939,42.784302 68,42.1304682 68,41.34821 C68,40.5744 68.28274,39.90476 68.84821,39.33928 C69.41369,38.7738 70.08333,38.49107 70.85714,38.49107 C71.24405,38.49107 71.63095,38.56547 72.01786,38.71428 C72.3377931,38.8491091 72.6529006,38.9901233 72.9631825,39.1373226 L68.7907878,43.3097173 Z M87.2569997,44.6424952 L91.3773739,40.5221211 C91.4574854,40.640574 91.5370508,40.7596869 91.61607,40.87946 C95.39585,46.60866 97.28571,52.8958 97.28571,59.74107 C97.28571,66.58634 95.39585,72.87348 91.61607,78.60268 C87.83629,84.331871 82.80658,88.550579 76.52679,91.2589257 C76.13988,91.407736 75.75298,91.48214 75.36607,91.48214 C74.59226,91.48214 73.92262,91.1994047 73.35714,90.6339257 C72.79166,90.068447 72.50893,89.398811 72.50893,88.624997 C72.50893,87.553563 73.08928,86.675596 74.25,85.991069 C74.45833,85.87202 74.79315,85.715772 75.25446,85.522319 C75.71578,85.328865 76.05059,85.172617 76.25893,85.053569 C77.62798,84.309517 78.84821,83.550596 79.91964,82.776783 C83.58038,80.06844 86.43749,76.69049 88.49107,72.64285 C90.54465,68.59521 91.57143,64.29466 91.57143,59.74107 C91.57143,55.18747 90.54465,50.88692 88.49107,46.83928 C88.1077149,46.0836809 87.6963584,45.3514195 87.2569997,44.6424952 Z M77.1648804,34.9356247 C76.8705071,34.7658459 76.5685238,34.5968277 76.25893,34.42857 C76.05059,34.30952 75.71578,34.15327 75.25446,33.95982 C74.79315,33.76637 74.45833,33.61012 74.25,33.49107 C73.08928,32.80654 72.50893,31.92857 72.50893,30.85714 C72.50893,30.08333 72.79166,29.41369 73.35714,28.84821 C73.92262,28.28273 74.59226,28 75.36607,28 C75.75298,28 76.13988,28.0744 76.52679,28.22321 C78.2253562,28.9557682 79.8324664,29.7988246 81.3481234,30.7523816 L77.1648804,34.9356247 Z M93.3786797,24.3786797 C94.5502525,23.2071068 96.4497475,23.2071068 97.6213203,24.3786797 C98.7928932,25.5502525 98.7928932,27.4497475 97.6213203,28.6213203 L27.6141779,98.6284628 C26.442605,99.8000357 24.54311,99.8000357 23.3715372,98.6284628 C22.1999643,97.45689 22.1999643,95.557395 23.3715372,94.3858221 L93.3786797,24.3786797 Z" id="icon-Speaker-off"></path>
        </g>
    </g>
</svg>

should become:

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"><path d="M57.286 54.815L39.242 72.858l-1.688-1.688H25.857c-.774 0-1.443-.283-2.009-.849-.565-.565-.848-1.235-.848-2.008V51.17c0-.774.283-1.444.848-2.01.566-.565 1.235-.847 2.01-.847h11.696L52.42 33.445c.565-.565 1.235-.848 2.009-.848.773 0 1.443.283 2.008.848.566.566.849 1.236.849 2.01v19.359zm0 19.799v9.413c0 .774-.283 1.443-.849 2.009-.565.565-1.235.848-2.008.848-.774 0-1.444-.283-2.01-.848l-3.277-3.278 8.144-8.144zm6.326-6.327l10.63-10.63c.124.68.187 1.375.187 2.084 0 2.262-.633 4.368-1.898 6.317-1.265 1.95-2.939 3.34-5.022 4.174-.298.149-.67.223-1.116.223-.774 0-1.444-.275-2.01-.826a2.702 2.702 0 0 1-.77-1.342zm15.192-15.191l4.275-4.276c1.852 3.385 2.778 7.025 2.778 10.921 0 4.554-1.265 8.757-3.794 12.612-2.53 3.854-5.878 6.659-10.045 8.415a3.104 3.104 0 0 1-1.116.223 2.797 2.797 0 0 1-2.054-.848c-.565-.566-.848-1.235-.848-2.01 0-1.16.58-2.038 1.741-2.633 1.667-.863 2.798-1.518 3.393-1.964a16.858 16.858 0 0 0 5.156-6.05 16.835 16.835 0 0 0 1.853-7.745c0-2.328-.447-4.543-1.34-6.645zM68.79 43.31c-.527-.526-.791-1.18-.791-1.962 0-.774.283-1.443.848-2.009.566-.565 1.235-.848 2.01-.848.386 0 .773.074 1.16.223.32.135.635.276.945.423l-4.172 4.173zm18.466 1.332l4.12-4.12.24.357c3.779 5.73 5.669 12.017 5.669 18.862 0 6.845-1.89 13.132-5.67 18.862-3.78 5.729-8.81 9.948-15.09 12.656a3.213 3.213 0 0 1-1.16.223c-.774 0-1.443-.283-2.009-.848-.565-.566-.848-1.235-.848-2.009 0-1.071.58-1.95 1.741-2.634.208-.119.543-.275 1.004-.469.462-.193.797-.35 1.005-.468a33.93 33.93 0 0 0 3.66-2.277c3.661-2.709 6.518-6.087 8.572-10.134 2.054-4.048 3.08-8.348 3.08-12.902 0-4.554-1.026-8.854-3.08-12.902a29.534 29.534 0 0 0-1.234-2.197zm-10.092-9.706c-.294-.17-.596-.34-.906-.507-.208-.12-.543-.276-1.005-.47-.46-.193-.796-.349-1.004-.468-1.16-.684-1.741-1.562-1.741-2.634 0-.774.283-1.443.848-2.009.566-.565 1.235-.848 2.01-.848.386 0 .773.074 1.16.223a35.254 35.254 0 0 1 4.821 2.53l-4.183 4.183zm16.214-10.557a3 3 0 1 1 4.242 4.242L27.614 98.628a3 3 0 1 1-4.242-4.242l70.007-70.007z" fill="#000" fill-rule="evenodd"/></svg>
agjs commented 6 years ago

I don't think that the icons in that icons folder are the one being optimized. That's a folder where we simply drag the icons into and then they are optimized as React components. You are not using icons directly from the icons folder.

agjs commented 6 years ago

From the README.md 

This will optimize and export all icons as React components, as well as generate an icon-map.js file, which will be used to generate the preview website showcasing all icons. The showcase site will be compiled and opened automatically using webpack-dev-server.
agjs commented 6 years ago

You can also inspect any icon source and you will notice that they are in fact, optimized. https://airtame.github.io/airtame-icons/

noahlaux commented 6 years ago

nice, I was writing this together with @madshensel as he had some issues. Hopefully he's satisfied from your tender walkthrough <3

mmellado commented 6 years ago

Late to the party, but just to clarify:

icons in src/icons are not optimised, they are the original source provided to the library, the optimised version is outputted by the build script into the directory that is published to NPM and not kept in this repository.

As for SVGO, it's already optimising things during the build process. If it's currently "not doing enough", you can enhance the SVGO options at https://github.com/airtame/airtame-icons/blob/master/src/util/svgo-config.js.

The function that processes the icons through SVGO can also be found here: https://github.com/airtame/airtame-icons/blob/master/src/build.js#L18