SVG to Vue.js component « Сайт по фигме, но автор отношения к ним не имеет! Not affiliated with Figma
Это не официальный сайт Figma / This is not the official site of Figma

SVG to Vue.js componentSVG to Vue.js component

установить плагин для Фигмы SVG to Vue.js component

Плагин SVG to Vue.js component экспортирует выбранные фреймы в файлы .vue с общими реквизитами.

Лучше всего подходит для иконок, логотипов и иллюстраций.

Как использовать:

  1. Выбрать фреймы;
  2. Запустить плагин;
  3. Настроить параметры экспорта;
  4. Нажмите «Download»;
  5. Скопируйте файлы в свой проект;
  6. Используйте в своем проекте «FrameName size=»24px» style=»color: black» /».
  7. ;

Компонент реквизита:

  • Размер: необязательная строка;
  • Ширина: необязательная строка;
  • Высота: необязательная строка.
  • «FrameIcon size=»24px» /»
  • «FrameIcon width=»24px» /»
  • «FrameIcon height=»24px» /«

Параметры экспорта

«.fill-current-color» вместо заливки в оттенках серого

«.stroke-current-color» вместо обводки в градациях серого

Удаляет заливку/обводку в оттенках серого и добавляет класс узлу. Работает только в том случае, если все заливки/обводки во фрейме выполнены в оттенках серого (если фрейм имеет насыщенный цвет заливки/обводки, весь фрейм будет проигнорирован). Лучше всего для иконок. Не забудьте добавить правила css:

.fill-current-color { fill: currentColor }

.stroke-current-color { stroke: currentColor }

Удалить маски

Удаляет все узлы «mask»

Удалить фрейм clipPath

Устанавливает overflow=»visible» и удаляет clip-path. Полезно, когда вы хотите сохранить размер фрейма, но есть элементы, выходящие за его границы. Например элементы с тенью.

Разработчик: Pavel Plonke

Плагины из той же категории