Иконки svg

Изображения svg дают бОльшую гибкость оформления сайта, чем обычные изображения. По-умолчанию wordpress, в целях безопасности, запрещает загрузку svg файлов. Чтобы разрешить закачивать файлы svg — нужно вставить следующий код в funсtions.php

// Разрешить загрузку svg файлов

function cc_mime_types( $mimes ){
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

Сервисы по подбору иконок

Клоны svg

Недавно столкнулся с технологией, когда мы подгружаем на сайт svg с несколькими объектами внутри, а в верстке вызываем копии объектов. Пример:

<svg style="display: none">
<symbol id="circle" viewBox="0 0 76 76"><g><path id="Up_Arrow" d="M55.9,45.4c-0.8,0.8-2,0.8-2.8,0L38.4,30.7L22.9,46.2c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8L37,26.5	c0.8-0.8,2.1-0.8,2.8,0l16.1,16.1C56.7,43.4,56.7,44.6,55.9,45.4z M76,38c0,21-17,38-38,38S0,59,0,38S17,0,38,0S76,17,76,38z M72,38C72,19.2,56.7,4,38,4C19.2,4,4,19.2,4,38s15.2,34,34,34C56.7,72,72,56.8,72,38z"/></g></symbol><symbol id="triangle" viewBox="0 0 294.951 294.951"><g><path d="m147.475,103.102c-5.22,0-8.701,3.48-8.701,8.701v62.644c0,5.22 3.48,8.701 8.701,8.701 5.22,0 8.701-3.48 8.701-8.701v-62.644c0-5.221-3.481-8.701-8.701-8.701z"/><path d="m152.695,212.73c-3.48-3.48-8.701-3.48-12.181,0-1.74,1.74-1.74,5.22-1.74,6.96 0,3.48 0,5.22 1.74,6.96 1.74,1.74 5.22,1.74 6.96,1.74 1.74,0 5.22,0 3.48-1.74 1.74-1.74 3.48-5.22 3.48-6.96 0.002-3.48 0.002-5.22-1.739-6.96z"/><path d="m288.425,214.47l-102.667-179.232c-6.96-13.921-22.621-22.621-38.283-22.621-15.661,0-29.582,8.701-38.283,22.621l-102.667,179.232c-8.701,13.921-8.701,31.322-5.32907e-15,45.243 6.96,13.921 22.621,22.621 38.283,22.621h205.334c17.401,0 31.322-8.701 38.283-22.621 8.701-13.921 8.701-31.322 0-45.243zm-13.921,38.283c-3.48,8.701-12.181,13.921-22.621,13.921h-207.075c-8.701,0-17.401-5.22-22.621-13.921-5.22-8.701-5.22-19.141 0-27.842l102.667-179.233c3.48-8.701 12.181-13.921 22.621-13.921 10.441,0 19.141,5.22 24.362,13.921l102.667,179.232c5.221,8.701 5.221,19.142 0,27.843z"/></g></symbol>
</svg>

Выводим иконки svg

<div class="item_icon">
	<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon">
	<use xlink:href="#circle"/></use>
	</svg>
</div>
	
<div class="item_icon">
	<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon">
	<use xlink:href="#triangle"/></use>
	</svg>
</div>

CSS

.item_icon {
    display: inline-block;
    padding: 15px;
    border-radius: 15px;
    border: 2px solid #47341b;
  transition: all 0.3s ease;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s ease 0s;	
}

.svg-icon {
    display: inline-block;
    margin: 0;
    width: 100px;
    height: 100px;
	fill: #47341b;
  transition: all 0.3s ease;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s ease 0s;	
}

.item_icon:hover {
	background: #8BC34A;
	border-color: #8BC34A;
	transform: scale(1.1);
    box-shadow: 0 20px 50px rgba(65,49,27,0.5);	
}

.item_icon:hover svg {fill: #fff;}
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Иконки svg
Ограничение длины текста
Рекомендации для васОграничение длины текстаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.