Как сгруппировать иконки SVG в один файл - PullRequest
0 голосов
/ 08 июля 2019

Я пытаюсь сгруппировать все значки SVG в один файл, как это:

    <?xml version="1.0" encoding="UTF-8"?>
<svg width="83px" height="83px" viewBox="0 0 83 83" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
    <title>Portal-icons</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0 79.425641 0 0 72 2.79558034e-14 72 79.425641"></polygon>
    </defs>
    <g id="Portal-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Feed-icons" transform="translate(21.000000, 39.000000)">
            <g id="Bell">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <g id="Clip-2"></g>
                <path d="M62.6326313,35.8889917 L54.4410302,50.1708277 C50.9353026,56.2809355 51.6158699,63.4926726 52.527012,69.7562216 C52.5803169,70.1916275 52.6546958,70.7214587 52.7303144,71.2499784 L52.7439506,71.3522725 L7.79551449,42.4961441 C7.90832255,42.4436856 8.02360992,42.391227 8.13889728,42.34008 C8.652112,42.1066395 9.16656637,41.873199 9.56201443,41.6764795 C10.0950635,41.4469734 10.6615832,41.2122215 11.2516561,40.9682893 C15.6908395,39.1309291 21.7700786,36.6142309 24.8778788,31.1926414 L33.06948,16.9108053 C38.5673237,7.33056543 49.3398742,3.97584214 57.5984164,9.2754656 C61.6210777,11.8590484 64.3507849,16.0321249 65.2830011,21.0288003 C66.2127379,26.0110496 65.2706046,31.2883782 62.6326313,35.8889917 L62.6326313,35.8889917 Z M33.1041902,66.6323159 C32.1186691,68.059188 30.6930727,69.0768836 29.0344222,69.528027 C27.1637918,70.0355633 25.2522529,69.7496643 23.6518659,68.721477 C21.9882568,67.6539459 20.821747,65.9831415 20.3680355,64.0172579 C19.9614306,62.26252 20.1610141,60.4382744 20.9271172,58.8146828 L33.1041902,66.6323159 Z M71.4800068,19.4786506 C70.151103,12.7062538 66.3962059,7.03417471 60.9045605,3.51027265 C49.5902833,-3.75392294 34.969862,0.597512511 27.6199826,13.4118211 L19.4283815,27.6949686 C17.3842001,31.259526 12.785102,33.1283613 9.08970813,34.6299868 C8.42029762,34.9014598 7.7781594,35.162441 7.18684679,35.4181763 C3.75673777,36.8489829 0.208862098,38.3283135 0.00803894627,41.7997571 C-0.120884558,44.1315389 1.29975329,46.2154542 4.35176933,48.173469 L15.6871205,55.4520907 C12.2644494,62.0828495 14.3544978,70.4827723 20.521752,74.4407688 C26.6877665,78.4000767 34.6958996,76.4814058 38.6751731,70.2086765 L50.2299422,77.6263133 C51.1100931,78.191554 53.0303095,79.425641 55.0013516,79.425641 C55.7897684,79.425641 56.5868627,79.2276101 57.3269332,78.7108935 C60.0529216,76.7279609 59.4876416,72.8499637 58.8876514,68.7424604 C58.2864216,64.1667648 57.4632946,57.9032157 59.9574686,53.5530917 L68.0821287,39.3866645 C71.5915752,33.2699993 72.7977538,26.1999003 71.4800068,19.4786506 L71.4800068,19.4786506 Z" id="Fill-1" fill="#8B8D8E" mask="url(#mask-2)"></path>
            </g>
            <g id="Chat" transform="translate(122.000000, 0.000000)" fill="#8B8D8E">
                <path d="M68.2614576,11.7212036 C60.7001948,4.16069852 50.6693958,0 39.979772,0 C29.2899367,0 19.2593492,4.16069852 11.6980863,11.7212036 C-2.91552041,26.3339658 -3.9306097,49.72521 9.17822921,65.5056316 C7.8922944,68.0929603 5.8291323,71.1039699 2.76758412,72.6094747 C1.2957998,73.3363284 0.467405755,74.9094868 0.720913785,76.5331741 C0.974421815,78.1568613 2.22652736,79.4253669 3.85033192,79.6788567 C4.61106745,79.7976733 5.69381525,79.9158558 7.01273359,79.9158558 C10.5485257,79.9158558 15.758232,79.0866759 21.0861293,75.2481778 C27.0229533,78.4441778 33.5185944,80 39.9632802,80 C50.3144,80 60.5646663,75.9921564 68.2779494,68.2796421 C75.8390008,60.7189256 80,50.6899085 80,40 C80,29.3111486 75.8216633,19.2810744 68.2614576,11.7212036 Z M65.0303403,65.0489696 C53.6129644,76.4655204 35.9369638,78.7314944 22.0335601,70.5631637 C21.12017,70.0213003 19.9868898,70.1906458 19.2593492,70.9181338 C19.1916907,70.9521721 19.1238207,71.0024894 19.0734997,71.0528068 C14.4896347,74.6048341 9.99013149,75.3488126 7.01273359,75.3488126 L6.99624183,75.3488126 C10.429489,72.8458396 12.5949846,69.1253125 13.863582,66.2331196 C14.066769,65.7426308 14.1005982,65.2348057 13.9817729,64.7614417 C13.9314519,64.3047796 13.7456024,63.8481176 13.4233787,63.4755998 C1.04229177,49.4882108 1.68483631,28.1779502 14.9125005,14.9512418 C28.7317539,1.13298696 51.2112983,1.13298696 65.0130028,14.9512418 C78.8495937,28.7692852 78.8495937,51.2307148 65.0303403,65.0489696 Z" id="Fill-1" stroke="#8B8D8E" stroke-width="0.4"></path>
                <path d="M40,39 C45.5228475,39 50,34.5228475 50,29 C50,23.4771525 45.5228475,19 40,19 C34.4771525,19 30,23.4771525 30,29 C30,34.5228475 34.4771525,39 40,39 Z M40,34 C37.2385763,34 35,31.7614237 35,29 C35,26.2385763 37.2385763,24 40,24 C42.7614237,24 45,26.2385763 45,29 C45,31.7614237 42.7614237,34 40,34 Z" id="Oval" fill-rule="nonzero"></path>
                <path d="M53.3820358,52.1419451 L53.3820358,58.0287934 L58.3820358,58.0287934 L58.3820358,52.0610237 C58.3820358,50.6620146 57.7745968,49.3319332 56.7172836,48.4157917 L56.7172836,48.4157917 C47.0341731,40.0255636 32.5627654,40.3598339 23.2773818,49.188209 C22.7810083,49.660152 22.5,50.3150789 22.5,51 L22.5,58.0287934 L27.5,58.0287934 L27.5,52.1101962 C34.9103462,45.7645802 45.9109476,45.7203441 53.3820358,52.1419451 Z" id="Path-3" fill-rule="nonzero"></path>
            </g>
        </g>
    </g>
</svg>

Почему-то

<c:svg xlinkHref="{! $Resource.feedIcon + '#Bell'}" size="large"/> работает, пока

<c:svg xlinkHref="{! $Resource.feedIcon + '#Chat'}" size="large"/> 

не работает.

Есть идеи, если мне нужно изменить структуру моего SVG-файла?

...