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