@megalabs/ml-button-icon

Button_Icon

Кнопка с иконкой - иконка может быть любая

<a href="#" class="ml-button-icon">
	<span class="ml-button-icon__icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="evenodd" d="M4 22h24v3H4v-3zm0-8h24v3H4v-3zm0-8h24v3H4V6z"></path>
		</svg>
	</span>
</a>

Меню вида "гамбургер"

<span onclick="this.classList.toggle('is-open')" class="ml-button-icon ml-button-icon--burger">
	<span class="ml-button-icon__icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="evenodd" d="M4 22h24v3H4v-3zm0-8h24v3H4v-3zm0-8h24v3H4V6z"></path>
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
			<path fill-rule="nonzero" d="M6.267 4L4 6.267 13.733 16 4 25.733 6.267 28 16 18.267 25.733 28 28 25.733 18.267 16 28 6.267 25.733 4 16 13.733z"></path>
		</svg>
	</span>
</span>

Расширенные настройки

ml-button-icon--burger используется для иконки "бургер"

класс is-open переключает иконку "бургера"" на "крестик"

npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-button-icon] (https://www.npmjs.com/package/@megalabs/ml-button-icon)

Для установки пакета

• npm i @megalabs/ml-button-icon
• затем в папке @megalabs/ml-button-icon запускаем npm install
• npm start