search

verstaburo / versta-project-template

😊 Шаблон для быстрого старта проекта
5 stars 1 forks source link

Потеря стилей у иконок при генерации спрайта #6

Closed glebgorokhov closed 7 years ago

glebgorokhov commented 7 years ago

Есть сложные иконки, которые одновременно регулируются и fill, и stroke для отдельных векторов. При генерации спрайта эти атрибуты пропадают. Можно ли как-то отрегулировать этот момент? Например, придумать какой-то атрибут, добавляемый к исходному svg, при наличии которого инлайновые fill/stroke не будут пропадать?

dontlemmedown commented 7 years ago

@glebgorokhov fill, stroke вырезаются специально (мы обсуждали) траблы с хромом.

Например, придумать какой-то атрибут

Можно попробовать, но, я не уверен, что это нужно.

Есть сложные иконки

Покажи пример подобной иконки

glebgorokhov commented 7 years ago

http://verstaburo.com/work/TIS/index.php http://prntscr.com/f8g8di У этих иконок у разных слоев разная прозрачность, хотя цвет один.

А вот иконка, у которой кружок внутри заполнен белым, а остальная часть другим цветом. Хорошо бы иметь возможность прописывать какие-то стили (например, белую заливку в этой иконке или прозрачность в примере выше) внутри svg https://verstaburo.github.io/wikipravo/ http://prntscr.com/f8g8x5

dontlemmedown commented 7 years ago

@glebgorokhov opacity не порежет, насчет иконки с 2мя или более цветами, по логике, она не должна быть в свг спрайте, ибо покрасить ее (нормально) все равно нельзя, поэтому, ее нужно подключать без спрайта. Но, конкретно в это примере, это фейл дизайнера, круг явно должен был быть вырезан. Но, в любом случае, можно обратиться к элементам svg https://jsfiddle.net/mfLex6cs/

glebgorokhov commented 7 years ago

Через use ты так не обратишься Покрасить можно. Просто у белого круга задается fill, а у остальной иконки - нет. Тогда через svg {fill: #...} будет краситься только та часть, у которой не указан цвет.

Что фейл дизайнера, в данном случае это так, но иногда это задумка, что часть svg красится, а часть нет.

dontlemmedown commented 7 years ago

@glebgorokhov в таком случае, придется отключить вырезание атрибутов stroke/fill и , если нужно, убирать их руками. Отключить?

glebgorokhov commented 7 years ago

Не, отключать не надо, ибо в 90% случаев их надо убирать.

А шо если сделать 2 папки:

/raw-icons/ /icons/

В raw-icons закидываются иконки В icons они автоматически перемещаются с вырезанием stroke/fill, и из них уже генерируется спрайт. Но если ты в icons обратно вернешь атрибуты, то они в спрайте сохраняются.

dontlemmedown commented 7 years ago

@glebgorokhov может с этим не заморачиваться и эти 10% складывать в static/images? Ибо оттуда атрибуты не режутся.

Просто при продакшн сборке (без вотчинга), у тебя опять все иконки сломаются, т.е они снова переместятся из raw-icons в icons и с каждой сборкой придется менять эти атрибуты.

Раз уж на то пошло, то лучше сделать 2 отдельных таска, 2 отдельных спрайта и 2 отдельных папки

glebgorokhov commented 7 years ago

А тут ты прав, однако. Просто хочется таки какой-то таск сделать для этих свг, ибо убирается всякий мусор из ненужных тегов типа мета-информации и т.д. Мб сделать для этого папку static/images/svg и в ней проводить такую небольшую оптимизацию, чисто уборка мета-тегов и прочего хлама?

dontlemmedown commented 7 years ago

@glebgorokhov static/images так и есть, из svg файлов в static/images/*/.svg убирается хлам из svg файлов. Там подключается https://github.com/svg/svgo через imagemin с дефолтными параметрами.

Вот пример: app/static/images/logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125.43 20.23">
  <title>icon</title>
  <path d="M9.68,4l-.7,4,5.36-2.15V2.29a9.79,9.79,0,0,0-4.08,1.39Z" fill="none"/>
  <path d="M91.47,13c0,.9.62,1.45,1.72,1.45,1.81,0,2.8-.9,2.8-2.6v-.16H93.13C92,11.72,91.47,12.24,91.47,13Z"
        fill="none"/>
  <path d="M53.18,13c0,.9.62,1.45,1.72,1.45,1.81,0,2.8-.9,2.8-2.6v-.16H54.83C53.71,11.72,53.18,12.24,53.18,13Z"
        fill="none"/>
  <path d="M76.4,8.8c0-.92-.71-1.4-2-1.4-1.52,0-2.55.94-2.73,3.06l3.45-.55C76,9.76,76.4,9.4,76.4,8.8Z" fill="none"/>
  <path
    d="M32.08,16a21.24,21.24,0,0,0-6.45-2.18l.5-1.12a2.57,2.57,0,0,0-.26-2.54,2.09,2.09,0,0,0-.85-.7l-8.6-3.6V2.29a9.79,9.79,0,0,1,4.09,1.38l.38.23.49,2.49a.14.14,0,0,0,.09.1l2,.83a.14.14,0,0,0,.2-.16L22.8,2.84a.86.86,0,0,0-.39-.57l-.88-.54a11.77,11.77,0,0,0-12.31,0l-1.1.67A.86.86,0,0,0,7.74,3l-1,6-1.33.53a2.12,2.12,0,0,0-1.15,1.14,2.58,2.58,0,0,0,.1,2.24l1.94,3.47a.14.14,0,0,0,.12.08H8.6a.17.17,0,0,0,.12-.26L6.28,11.81l9-3.61,8.82,3.61-.79,1.8c-2.83-.13-5.9,1.09-8.87,2.27-2.5,1-4.87,1.93-6.8,2a7.81,7.81,0,0,1-5.88-2.47.32.32,0,0,0-.46,0l-.6.54-.58.51a.39.39,0,0,0,0,.54,10,10,0,0,0,7.4,3.3h.18c2.31,0,4.84-1,7.52-2.11s5.72-2.27,8.13-2.12A19.58,19.58,0,0,1,31,18.15a.32.32,0,0,0,.44-.15l.75-1.44A.38.38,0,0,0,32.08,16ZM14.34,5.91,9,8.06l.7-4,.58-.36a9.79,9.79,0,0,1,4.08-1.39Z"
    fill="#fff"/>
  <path
    d="M47.13,12.73A5,5,0,0,0,45,10.87c-.12,0-.09-.14,0-.18a4.55,4.55,0,0,0,2-1.79l2-3.26c.09-.16,0-.3-.18-.3H46.58a.37.37,0,0,0-.32.16L44.74,7.81c-.62.9-1.29,1.88-2.41,1.88H42V.25A.23.23,0,0,0,41.73,0h-2a.23.23,0,0,0-.25.25v16a.23.23,0,0,0,.25.25h2a.23.23,0,0,0,.25-.25V12h.34c1.26,0,1.91.8,2.55,1.77l1.59,2.55a.37.37,0,0,0,.32.16h2.27c.21,0,.3-.14.18-.3Z"
    fill="#fff"/>
  <path
    d="M55.23,5.1a8.57,8.57,0,0,0-2.5.34l-.87.25a.24.24,0,0,0-.18.32l.51,1.7a.24.24,0,0,0,.32.18l.83-.25a6.27,6.27,0,0,1,1.79-.23c1.7,0,2.6.76,2.6,2.16v.14H54.83c-2.71,0-4.18,1.38-4.18,3.54s1.42,3.47,4,3.47a4,4,0,0,0,3.15-1.22c.3-.28.44-.28.57,0l.18.71a.28.28,0,0,0,.3.21H60a.23.23,0,0,0,.25-.25V9.49C60.23,6.71,58.33,5.1,55.23,5.1Zm2.48,6.78c0,1.7-1,2.6-2.8,2.6-1.1,0-1.72-.55-1.72-1.45s.53-1.31,1.65-1.31h2.87Z"
    fill="#fff"/>
  <path
    d="M67.68,5.33H65.1V1.93c0-.18-.11-.25-.3-.21l-2,.69a.27.27,0,0,0-.21.28v10.5A3.19,3.19,0,0,0,66,16.72a3.42,3.42,0,0,0,1.56-.39.25.25,0,0,0,.12-.34l-.74-1.56c-.07-.16-.18-.18-.34-.12a1.71,1.71,0,0,1-.6.09c-.55,0-.9-.44-.9-1.22V7.6h2.57a.23.23,0,0,0,.25-.25V5.58A.23.23,0,0,0,67.68,5.33Z"
    fill="#fff"/>
  <path
    d="M78.92,8.75c0-2.27-1.68-3.65-4.43-3.65-3.35,0-5.33,2.23-5.33,5.81s2,5.81,5.42,5.81a9.65,9.65,0,0,0,2.34-.3L78,16.15a.24.24,0,0,0,.18-.32L77.7,14.1a.24.24,0,0,0-.32-.18l-1,.25a6.22,6.22,0,0,1-1.81.23,2.43,2.43,0,0,1-2.62-2l3.61-.55C77.84,11.53,78.92,10.52,78.92,8.75Zm-7.21,1.7c.18-2.11,1.22-3.06,2.73-3.06,1.24,0,2,.48,2,1.4,0,.6-.44,1-1.24,1.1Z"
    fill="#fff"/>
  <path
    d="M87.37,5.1a4.27,4.27,0,0,0-3.63,1.81c-.21.23-.32.18-.46-.07l-.37-1.31a.28.28,0,0,0-.3-.21H81.46a.23.23,0,0,0-.25.25V16.22a.23.23,0,0,0,.25.25h2a.23.23,0,0,0,.25-.25V13.48c0-4.23,1.1-6,3.61-6.09a.23.23,0,0,0,.25-.25V5.35A.23.23,0,0,0,87.37,5.1Z"
    fill="#fff"/>
  <path
    d="M93.52,5.1a8.57,8.57,0,0,0-2.5.34l-.87.25A.24.24,0,0,0,90,6l.51,1.7a.24.24,0,0,0,.32.18l.83-.25a6.27,6.27,0,0,1,1.79-.23c1.7,0,2.6.76,2.6,2.16v.14H93.13c-2.71,0-4.18,1.38-4.18,3.54s1.42,3.47,4,3.47a4,4,0,0,0,3.15-1.22c.3-.28.44-.28.57,0l.18.71a.28.28,0,0,0,.3.21h1.15a.23.23,0,0,0,.25-.25V9.49C98.53,6.71,96.62,5.1,93.52,5.1ZM96,11.88c0,1.7-1,2.6-2.8,2.6-1.1,0-1.72-.55-1.72-1.45s.53-1.31,1.65-1.31H96Z"
    fill="#fff"/>
  <path
    d="M102.82,13.41a1.48,1.48,0,0,0-1.58,1.65,1.48,1.48,0,0,0,1.58,1.65,1.5,1.5,0,0,0,1.61-1.65A1.5,1.5,0,0,0,102.82,13.41Z"
    fill="#fb2500"/>
  <path
    d="M113.13,5.1a4.27,4.27,0,0,0-3.63,1.81c-.21.23-.32.18-.46-.07l-.37-1.31a.28.28,0,0,0-.3-.21h-1.15a.23.23,0,0,0-.25.25V16.22a.23.23,0,0,0,.25.25h2a.23.23,0,0,0,.25-.25V13.48c0-4.23,1.1-6,3.61-6.09a.23.23,0,0,0,.25-.25V5.35A.23.23,0,0,0,113.13,5.1Z"
    fill="#fff"/>
  <path
    d="M125.18,5.33h-2a.23.23,0,0,0-.25.25v5.35c0,2.23-1,3.47-2.69,3.47-1.24,0-2-.87-2-2.32V5.58a.23.23,0,0,0-.25-.25h-2a.23.23,0,0,0-.25.25v6.78c0,2.71,1.58,4.34,4.2,4.34A4.12,4.12,0,0,0,123,15.3c.25-.23.39-.25.53,0l.21.92a.24.24,0,0,0,.28.23h1.15a.23.23,0,0,0,.25-.25V5.58A.23.23,0,0,0,125.18,5.33Z"
    fill="#fff"/>
</svg>

dist/images/logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125.43 20.23"><title>icon</title><path d="M9.68 4l-.7 4 5.36-2.15V2.29a9.79 9.79 0 0 0-4.08 1.39zm81.79 9c0 .9.62 1.45 1.72 1.45 1.81 0 2.8-.9 2.8-2.6v-.16h-2.86c-1.13.03-1.66.55-1.66 1.31zm-38.29 0c0 .9.62 1.45 1.72 1.45 1.81 0 2.8-.9 2.8-2.6v-.16h-2.87c-1.12.03-1.65.55-1.65 1.31zM76.4 8.8c0-.92-.71-1.4-2-1.4-1.52 0-2.55.94-2.73 3.06l3.45-.55C76 9.76 76.4 9.4 76.4 8.8z" fill="none"/><path d="M32.08 16a21.24 21.24 0 0 0-6.45-2.18l.5-1.12a2.57 2.57 0 0 0-.26-2.54 2.09 2.09 0 0 0-.85-.7l-8.6-3.6V2.29a9.79 9.79 0 0 1 4.09 1.38l.38.23.49 2.49a.14.14 0 0 0 .09.1l2 .83a.14.14 0 0 0 .2-.16l-.87-4.32a.86.86 0 0 0-.39-.57l-.88-.54a11.77 11.77 0 0 0-12.31 0l-1.1.67a.86.86 0 0 0-.38.6l-1 6-1.33.53a2.12 2.12 0 0 0-1.15 1.14 2.58 2.58 0 0 0 .1 2.24l1.94 3.47a.14.14 0 0 0 .12.08H8.6a.17.17 0 0 0 .12-.26l-2.44-4.39 9-3.61 8.82 3.61-.79 1.8c-2.83-.13-5.9 1.09-8.87 2.27-2.5 1-4.87 1.93-6.8 2a7.81 7.81 0 0 1-5.88-2.47.32.32 0 0 0-.46 0l-.6.54-.58.51a.39.39 0 0 0 0 .54 10 10 0 0 0 7.4 3.3h.18c2.31 0 4.84-1 7.52-2.11s5.72-2.27 8.13-2.12A19.58 19.58 0 0 1 31 18.15a.32.32 0 0 0 .44-.15l.75-1.44a.38.38 0 0 0-.11-.56zM14.34 5.91L9 8.06l.7-4 .58-.36a9.79 9.79 0 0 1 4.08-1.39zm32.79 6.82A5 5 0 0 0 45 10.87c-.12 0-.09-.14 0-.18a4.55 4.55 0 0 0 2-1.79l2-3.26c.09-.16 0-.3-.18-.3h-2.24a.37.37 0 0 0-.32.16l-1.52 2.31c-.62.9-1.29 1.88-2.41 1.88H42V.25a.23.23 0 0 0-.27-.25h-2a.23.23 0 0 0-.25.25v16a.23.23 0 0 0 .25.25h2a.23.23 0 0 0 .25-.25V12h.34c1.26 0 1.91.8 2.55 1.77l1.59 2.55a.37.37 0 0 0 .32.16h2.27c.21 0 .3-.14.18-.3zm8.1-7.63a8.57 8.57 0 0 0-2.5.34l-.87.25a.24.24 0 0 0-.18.32l.51 1.7a.24.24 0 0 0 .32.18l.83-.25a6.27 6.27 0 0 1 1.79-.23c1.7 0 2.6.76 2.6 2.16v.14h-2.9c-2.71 0-4.18 1.38-4.18 3.54s1.42 3.47 4 3.47a4 4 0 0 0 3.15-1.22c.3-.28.44-.28.57 0l.18.71a.28.28 0 0 0 .3.21H60a.23.23 0 0 0 .25-.25V9.49c-.02-2.78-1.92-4.39-5.02-4.39zm2.48 6.78c0 1.7-1 2.6-2.8 2.6-1.1 0-1.72-.55-1.72-1.45s.53-1.31 1.65-1.31h2.87zm9.97-6.55H65.1v-3.4c0-.18-.11-.25-.3-.21l-2 .69a.27.27 0 0 0-.21.28v10.5A3.19 3.19 0 0 0 66 16.72a3.42 3.42 0 0 0 1.56-.39.25.25 0 0 0 .12-.34l-.74-1.56c-.07-.16-.18-.18-.34-.12a1.71 1.71 0 0 1-.6.09c-.55 0-.9-.44-.9-1.22V7.6h2.57a.23.23 0 0 0 .25-.25V5.58a.23.23 0 0 0-.24-.25zm11.24 3.42c0-2.27-1.68-3.65-4.43-3.65-3.35 0-5.33 2.23-5.33 5.81s2 5.81 5.42 5.81a9.65 9.65 0 0 0 2.34-.3l1.08-.27a.24.24 0 0 0 .18-.32l-.48-1.73a.24.24 0 0 0-.32-.18l-1 .25a6.22 6.22 0 0 1-1.81.23 2.43 2.43 0 0 1-2.62-2l3.61-.55c2.28-.32 3.36-1.33 3.36-3.1zm-7.21 1.7c.18-2.11 1.22-3.06 2.73-3.06 1.24 0 2 .48 2 1.4 0 .6-.44 1-1.24 1.1zM87.37 5.1a4.27 4.27 0 0 0-3.63 1.81c-.21.23-.32.18-.46-.07l-.37-1.31a.28.28 0 0 0-.3-.21h-1.15a.23.23 0 0 0-.25.25v10.65a.23.23 0 0 0 .25.25h2a.23.23 0 0 0 .25-.25v-2.74c0-4.23 1.1-6 3.61-6.09a.23.23 0 0 0 .25-.25V5.35a.23.23 0 0 0-.2-.25zm6.15 0a8.57 8.57 0 0 0-2.5.34l-.87.25A.24.24 0 0 0 90 6l.51 1.7a.24.24 0 0 0 .32.18l.83-.25a6.27 6.27 0 0 1 1.79-.23c1.7 0 2.6.76 2.6 2.16v.14h-2.92c-2.71 0-4.18 1.38-4.18 3.54s1.42 3.47 4 3.47a4 4 0 0 0 3.15-1.22c.3-.28.44-.28.57 0l.18.71a.28.28 0 0 0 .3.21h1.15a.23.23 0 0 0 .25-.25V9.49c-.02-2.78-1.93-4.39-5.03-4.39zM96 11.88c0 1.7-1 2.6-2.8 2.6-1.1 0-1.72-.55-1.72-1.45s.53-1.31 1.65-1.31H96z" fill="#fff"/><path d="M102.82 13.41a1.48 1.48 0 0 0-1.58 1.65 1.48 1.48 0 0 0 1.58 1.65 1.5 1.5 0 0 0 1.61-1.65 1.5 1.5 0 0 0-1.61-1.65z" fill="#fb2500"/><path d="M113.13 5.1a4.27 4.27 0 0 0-3.63 1.81c-.21.23-.32.18-.46-.07l-.37-1.31a.28.28 0 0 0-.3-.21h-1.15a.23.23 0 0 0-.25.25v10.65a.23.23 0 0 0 .25.25h2a.23.23 0 0 0 .25-.25v-2.74c0-4.23 1.1-6 3.61-6.09a.23.23 0 0 0 .25-.25V5.35a.23.23 0 0 0-.2-.25zm12.05.23h-2a.23.23 0 0 0-.25.25v5.35c0 2.23-1 3.47-2.69 3.47-1.24 0-2-.87-2-2.32v-6.5a.23.23 0 0 0-.25-.25h-2a.23.23 0 0 0-.25.25v6.78c0 2.71 1.58 4.34 4.2 4.34a4.12 4.12 0 0 0 3.06-1.4c.25-.23.39-.25.53 0l.21.92a.24.24 0 0 0 .28.23h1.15a.23.23 0 0 0 .25-.25V5.58a.23.23 0 0 0-.24-.25z" fill="#fff"/></svg>

Пример не очень удачный, ибо метатеги режутся иллюстратором, но все же.

glebgorokhov commented 7 years ago

Тада ладно