3

Использую webpack-svgstore-plugin. Добился того что делаю спрайт. Как подключить один елемент с спрайта. Подключаю как в примере плагина но не работает

Весь пример тут

 <svg class="svg-icon">
    <use xlink:href="#iconarrow-big-right"></use>
 </svg>

1
  • Shperung точно не автор этого плагина, насколько мне известно ) 5 фев 2017 в 14:35

1 ответ 1

4
  1. Первая главная ошибка - вы верите в волшебную силу спрайтов. Типа надо просто накидать кучу SVG файликов в одну папку, установить вебпак и будет счастье - всё ОК, все иконки на странице. Но не получится ничего, как в вашем случае.

  2. Потому-что надо понимать, как всё это работает. Пойдите по другому пути, вставьте вручную в HTML страницу хоть немного иконок из спрайта, который сделаете вручную, сами.
    Иначе появится куча вопросов - почему не видно иконку, почему изображение обрезано, не того размера, почему нельзя стилизовать иконки.

  3. Я посмотрел вашу папку с файлами иконок и такое впечатление, что абсолютно не было подбора иконок, набросали всё подряд, что нашли.

  4. В идеальном случае у иконок должны быть одинаковые атрибуты viewBox, а у вас они колеблются от 16 до 425.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>test</title>
 </head> 
<body>
<div id="container">
<!--  начало спрайта -->
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	

<symbol id="child" viewBox="0 0 425 425">
	<path d="M119.3,173.5c29.6,0,53.6-24,53.6-53.7c0-18.5,6.5-35.4-7.8-45c-8.5-5.8-46.1-8.5-57.2-8.5c-13.2,0-30.4,10.8-39.7,18.7
		c-11.6,9.8-2.5,18.5-2.5,34.9C65.7,149.5,89.7,173.5,119.3,173.5z M120.5,161c-21.7,0-39.2-17.9-39.2-39.9c0-2.2,0.3-4.3,0.6-6.5
		c9.9-1.8,16.5,1.5,16.5,1.5l16.5-8c0,0-8.4,12.1-0.8,8c16.7-5.6,35.4-3.3,45-1.4c0.3,2.1,0.6,4.2,0.6,6.4
		C159.8,143.2,142.2,161,120.5,161z"/>
	<path d="M241.8,178.7c-3.2-28.6,10.5-45.9,15.8-51.4c4.9,29.6,30.4,52.3,61.4,52.3c29.3,0,53.9-20.4,60.5-47.8
		c5.1,8.9,13.6,27.2,11.5,46.8c52.1-0.4,26.4-59.9-10-66.4c-0.3-3.1-0.6-6.1-1.2-9c-2.1-18.8-19-57-67.2-55.9
		c-41.6,1-50.7,32.3-52.8,51.4c-1.5,4.7-2.4,9.6-2.7,14.7C202.8,122.9,208.7,177.8,241.8,178.7z M319,162.1
		c-24.4,0-44.1-19.6-44.7-43.8c8.9-3.2,15.4-18.6,15.4-18.6s5.3,1.8,5.3,19.2c9.2,3.2,25.2-27,25.2-27v23.8
		c10.2,2.8,42.2-0.9,42.2-0.9l1.2,1c0,0.5,0.2,1,0.2,1.6C363.7,141.9,343.7,162.1,319,162.1z"/>
	<polygon points="391,268.1 415.9,261.9 356.3,181.3 332,181.3 332,181.3 283.7,181.3 219.3,258.9 157,182.3 86.1,182.3 2.9,273.1 
		27.5,279.7 80.6,234.4 80.6,322.3 91.2,322.3 91.2,389.1 84.4,389.1 84.4,396.9 115.3,396.9 115.3,322.3 126.9,322.3 126.9,396.9 
		157.6,396.9 157.6,389.1 150.9,389.1 150.9,322.3 163.9,322.3 163.9,236 206.3,279.7 223.7,275.4 233.3,277.7 281.4,222.7 
		284.1,244.5 239.5,321.3 291,321.3 291,388.1 284.2,388.1 284.2,395.9 315,395.9 315,321.3 326.6,321.3 326.6,395.9 357.4,395.9 
		357.4,388.1 350.6,388.1 350.6,321.3 390.6,321.3 351.2,244.5 353.4,217.7 	"/>
</symbol>
   <symbol id="basket" viewBox="0 0 425 425">
	 <path d="M423.8,183.1c0,0,0-0.1,0-0.1c0-0.5,0-0.9-0.1-1.4c0-0.3-0.1-0.5-0.1-0.8c0-0.3-0.1-0.5-0.1-0.8c-1.4-8.6-8.8-15.3-17.8-16
		H21.2c-10.9,0-19.8,8.6-19.8,19.2s8.9,19.2,19.8,19.2h17.5L81.2,367l0.1,0c2.1,8.3,9.9,14.6,19.1,14.6l0,0c0,0,0.1,0,0.1,0v0h224.3
		c9.3,0,17-6.2,19.1-14.6l0.1,0l42.4-164.6H404C414.9,202.4,423.8,193.8,423.8,183.1C423.8,183.2,423.8,183.2,423.8,183.1
		C423.8,183.1,423.8,183.1,423.8,183.1z M153.2,324c0,10.6-8.9,19.2-19.8,19.2s-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		s19.8,8.6,19.8,19.2V324z M232.4,324c0,10.6-8.9,19.2-19.8,19.2c-10.9,0-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		c10.9,0,19.8,8.6,19.8,19.2V324z M311.6,324c0,10.6-8.9,19.2-19.8,19.2c-10.9,0-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		c10.9,0,19.8,8.6,19.8,19.2V324z M234.9,64.6l43.8,80.2h44.8l-53.6-98.2l-0.1,0C266.6,40.4,260,36,252.2,36
		c-10.9,0-19.8,8.6-19.8,19.2C232.4,58.6,233.4,61.8,234.9,64.6L234.9,64.6z M190.3,64.6l-0.1-0.1c1.6-2.8,2.6-5.9,2.6-9.3
		c0-10.6-8.9-19.2-19.8-19.2c-7.8,0-14.4,4.4-17.6,10.7l0,0l-53.6,98.2h44.8L190.3,64.6z"/>
   </symbol>
       <symbol id="clock" viewBox="0 0 425 425">
         <path d="M69.605,70.754c-78.789,78.199-78.789,204.997,0,283.17c78.785,78.171,206.532,78.203,285.292,0
	c78.787-78.205,78.787-204.997,0-283.17C276.109-7.448,148.363-7.448,69.605,70.754z M319.42,224.851H211.886
	c-0.191,0-0.352,0.106-0.541,0.106c-7.456,0-13.508-6.005-13.508-13.41V77.352c0-7.401,6.053-13.41,13.508-13.41
	c7.458,0,13.51,6.009,13.51,13.41v120.681h94.565c7.458,0,13.51,6.005,13.51,13.406C332.93,218.842,326.878,224.851,319.42,224.851z
	"/>
	  </symbol>
	   </svg>
	   <!--  конец спрайта -->
 </div>  

	 <div id="s1">
	    <svg> 
	      <use xlink:href="#basket"></use>
    	</svg>
	</div>
       <div id="s2">
	  		<svg> 
		     <use xlink:href="#child"></use>
		    </svg>
       </div>
	     <div id="s3">
	  		<svg> 
		     <use xlink:href="#clock"></use>
		    </svg>
         </div>
     </body>
  </html>

Формировать спрайт можно несколькими путями: либо разместить в библиотечной секции <defs> ---- </defs> а каждую иконку обернуть тегом группы <g id="child"> ....</g> Либо вторым способом - помещая код иконки в парные теги <symbol id="child"> как в примере выше.

Делается это прежде всего для того, чтобы иконки лежали в одном большом файле и не были видны пока их не вызовут командой <use> Загружать спрайт в HTML можно разными способами. Подробнее здесь. И еще один прием, чтобы не гадать почему такие большие отступы текста от иконки, посмотрите заранее, как расположено изображение относительно viewport внутри SVG файла. Для этого временно в шапку файла можно добавить рамку style="1px solid red;" после того, как отрегулируете расположение изображения относительно viewport, рамку можно убрать. Как позиционировать иконку внутри файла SVG - здесь

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.