Можно ли привязать код svg path к классу css?

213

26 января 2018, 21:19

Нужно как-то создать библиотеку иконок, чтобы при создании элемента <svg> ему можно было просто указать класс css, но так, чтобы эффекты hover и различные модификаторы класса влияли на иконку. Например:

<style>
[class*=Button]{
    width: 24px;
    height: 20px;
    cursor: pointer;
    fill-rule: evenodd;
    fill: #B5B5B5;
}
[class*=Button]:hover{
    fill: #075A77;
}
.Button-Selected{
    fill: #4284EE;
}
/* это естественно не работает - как правильно, если подобное возможно? */
#Screen{
    d: M22.000,16.000 L13.000,16.000 L13.000,18.000 L16.035,18.000 C16.587,18.000 17.035,18.447 17.035,19.000 C17.035,19.553 16.587,20.000 16.035,20.000 L8.035,20.000 C7.483,20.000 7.035,19.553 7.035,19.000 C7.035,18.447 7.483,18.000 8.035,18.000 L11.000,18.000 L11.000,16.000 L2.000,16.000 C0.897,16.000 -0.000,15.103 -0.000,14.000 L-0.000,2.000 C-0.000,0.898 0.897,0.000 2.000,0.000 L22.000,0.000 C23.103,0.000 24.000,0.898 24.000,2.000 L24.000,14.000 C24.000,15.103 23.103,16.000 22.000,16.000 ZM2.000,2.000 L2.000,14.000 L21.997,14.000 L22.000,2.000 L2.000,2.000 Z;
}
</style>
<svg class="Button-Selected">
<path id="Screen" />
</svg>

То есть чтобы можно было просто написать <svg class="Screen Button-Selected"><path id="Screen" /></svg> и появился элемент со всеми рабочими hover-ами и прочими модами.

Это возможно?

Answer 1

Можно сделать, то что вы хотите очень многими способами. Вот один из самых простых, да ещё и с анимацией закраски. Если не нужна анимация, её легко убрать из правил CSS/

Код каждой иконки обёртываете тегами <svg> это так называемый инлайновый способ добавления SVG в HTML/ Другие способы подключения svg в html

Я в своем примере присвоил один класс двум иконкам, можно добавить туда же и #ID для уникальности, если на иконках будут, какие-то разные реакции.

svg path { 
fill:inherit; 
stroke:inherit; 
stroke-width:inherit; 
 
} 
 
.icon-youtube{ 
transition: all .8s ease; 
} 
 
.icon-youtube:hover { 
 fill:red; 
}

    <svg class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">  
    <path d="M4.652 0h1.44l.988 3.702.916-3.702h1.454l-1.665 5.505v3.757h-1.431v-3.757l-1.702-5.505zm6.594 2.373c-1.119 0-1.861.74-1.861 1.835v3.349c0 1.204.629 1.831 1.861 1.831 1.022 0 1.826-.683 1.826-1.831v-3.349c0-1.069-.797-1.835-1.826-1.835zm.531 5.127c0 .372-.19.646-.532.646-.351 0-.554-.287-.554-.646v-3.179c0-.374.172-.651.529-.651.39 0 .557.269.557.651v3.179zm4.729-5.07v5.186c-.155.194-.5.512-.747.512-.271 0-.338-.186-.338-.46v-5.238h-1.27v5.71c0 .675.206 1.22.887 1.22.384 0 .918-.2 1.468-.853v.754h1.27v-6.831h-1.27zm2.203 13.858c-.448 0-.541.315-.541.763v.659h1.069v-.66c.001-.44-.092-.762-.528-.762zm-4.703.04c-.084.043-.167.109-.25.198v4.055c.099.106.194.182.287.229.197.1.485.107.619-.067.07-.092.105-.241.105-.449v-3.359c0-.22-.043-.386-.129-.5-.147-.193-.42-.214-.632-.107zm4.827-5.195c-2.604-.177-11.066-.177-13.666 0-2.814.192-3.146 1.892-3.167 6.367.021 4.467.35 6.175 3.167 6.367 2.6.177 11.062.177 13.666 0 2.814-.192 3.146-1.893 3.167-6.367-.021-4.467-.35-6.175-3.167-6.367zm-12.324 10.686h-1.363v-7.54h-1.41v-1.28h4.182v1.28h-1.41v7.54zm4.846 0h-1.21v-.718c-.223.265-.455.467-.696.605-.652.374-1.547.365-1.547-.955v-5.438h1.209v4.988c0 .262.063.438.322.438.236 0 .564-.303.711-.487v-4.939h1.21v6.506zm4.657-1.348c0 .805-.301 1.431-1.106 1.431-.443 0-.812-.162-1.149-.583v.5h-1.221v-8.82h1.221v2.84c.273-.333.644-.608 1.076-.608.886 0 1.18.749 1.18 1.631v3.609zm4.471-1.752h-2.314v1.228c0 .488.042.91.528.91.511 0 .541-.344.541-.91v-.452h1.245v.489c0 1.253-.538 2.013-1.813 2.013-1.155 0-1.746-.842-1.746-2.013v-2.921c0-1.129.746-1.914 1.837-1.914 1.161 0 1.721.738 1.721 1.914v1.656z"/> 
    </svg>  
 
    <svg  class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"/></svg>

Иконки SVG в качестве ссылок:

svg path { 
fill:inherit; 
stroke:inherit; 
stroke-width:inherit; 
 
} 
 
.icon-youtube{ 
transition: all .8s ease; 
} 
 
.icon-youtube:hover { 
 fill:red; 
}

<a href="https://www.youtube.com/?gl=RU&hl=ru"> 
     <svg class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">  
    <path d="M4.652 0h1.44l.988 3.702.916-3.702h1.454l-1.665 5.505v3.757h-1.431v-3.757l-1.702-5.505zm6.594 2.373c-1.119 0-1.861.74-1.861 1.835v3.349c0 1.204.629 1.831 1.861 1.831 1.022 0 1.826-.683 1.826-1.831v-3.349c0-1.069-.797-1.835-1.826-1.835zm.531 5.127c0 .372-.19.646-.532.646-.351 0-.554-.287-.554-.646v-3.179c0-.374.172-.651.529-.651.39 0 .557.269.557.651v3.179zm4.729-5.07v5.186c-.155.194-.5.512-.747.512-.271 0-.338-.186-.338-.46v-5.238h-1.27v5.71c0 .675.206 1.22.887 1.22.384 0 .918-.2 1.468-.853v.754h1.27v-6.831h-1.27zm2.203 13.858c-.448 0-.541.315-.541.763v.659h1.069v-.66c.001-.44-.092-.762-.528-.762zm-4.703.04c-.084.043-.167.109-.25.198v4.055c.099.106.194.182.287.229.197.1.485.107.619-.067.07-.092.105-.241.105-.449v-3.359c0-.22-.043-.386-.129-.5-.147-.193-.42-.214-.632-.107zm4.827-5.195c-2.604-.177-11.066-.177-13.666 0-2.814.192-3.146 1.892-3.167 6.367.021 4.467.35 6.175 3.167 6.367 2.6.177 11.062.177 13.666 0 2.814-.192 3.146-1.893 3.167-6.367-.021-4.467-.35-6.175-3.167-6.367zm-12.324 10.686h-1.363v-7.54h-1.41v-1.28h4.182v1.28h-1.41v7.54zm4.846 0h-1.21v-.718c-.223.265-.455.467-.696.605-.652.374-1.547.365-1.547-.955v-5.438h1.209v4.988c0 .262.063.438.322.438.236 0 .564-.303.711-.487v-4.939h1.21v6.506zm4.657-1.348c0 .805-.301 1.431-1.106 1.431-.443 0-.812-.162-1.149-.583v.5h-1.221v-8.82h1.221v2.84c.273-.333.644-.608 1.076-.608.886 0 1.18.749 1.18 1.631v3.609zm4.471-1.752h-2.314v1.228c0 .488.042.91.528.91.511 0 .541-.344.541-.91v-.452h1.245v.489c0 1.253-.538 2.013-1.813 2.013-1.155 0-1.746-.842-1.746-2.013v-2.921c0-1.129.746-1.914 1.837-1.914 1.161 0 1.721.738 1.721 1.914v1.656z"/> 
    </svg>  
</a>   
      <a href="https://www.facebook.com"> 
    <svg  class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"/> 
	 </a> 
	</svg>

Если вы хотите добавить много svg иконок в HTML, то необходимо сделать спрайт иконок. Это повысит производительность вашего приложения, так как спрайт это один большой файл со множеством иконок.

Как подключать и настраивать спрайт можно понять здесь, прочитав вопросы и ответы на эту тему на stackoverflow

Ещё один современный способ,- использование символьного шрифта от Google c 900

высококачественными иконками на все популярные темы веб строительства.
Всё делается в два шага,- подключение шрифта, выбор иконки по названию, пишите home - иконка домика, пишите settings - иконка шестеренки (настройка)
Вот ссылка на топик - Поддержка лигатурных иконок браузерами