Использование svg спрайтов:
1. Создаём скрытый svg контейнер в футере или хедере (для того чтобы управлять цветом у symbol и всего что внутри не должен быть указан fill)
|
1 2 3 4 5 6 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol viewBox="0 0 10.41 46" id="arrow-down" xmlns="http://www.w3.org/2000/svg"> <path d="M10.12 41.5l-4.21 4.21a1 1 0 01-1.41 0L.29 41.5a1 1 0 010-1.41 1 1 0 011.42 0l2.5 2.5V0h2v42.59l2.5-2.5a1 1 0 011.41 1.41z"/> </symbol> </svg> |
2. Создаём отдельный файл со спрайтами и обращаемся к нему из use
|
1 2 3 |
<svg width="25" height="10" class="show-link-arrow__icon"> <use xlink:href="img/sprites.svg#show-link-arrow"></use> </svg> |
Изменить цвет use
|
1 |
path { fill: currentcolor; } |
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
body { background: #ddd; text-align: center; padding-top: 2em; } .parent { width: 320px; height: 50px; display: block; transition: all 0.3s; cursor: pointer; padding: 12px; box-sizing: border-box; } /*** desired colors for children ***/ .parent{ color: #000; background: #def; } .parent:hover{ color: #fff; background: #85c1fc; } .parent span{ font-size: 18px; margin-right: 8px; font-weight: bold; font-family: 'Helvetica'; line-height: 26px; vertical-align: top; } .parent svg{ max-height: 26px; width: auto; display: inline; } /**** magic trick *****/ .parent svg path{ fill: currentcolor; } <div class='parent'> <span>TEXT WITH SVG</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32"> <path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path> </svg> </div> |
