Logo Windi CSS

SVG

Цвет заливки

Утилиты для стилизации заливки SVG-элементов.

none
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.fill-current {
  fill: currentColor;
}
Персонализация
windi.config.js
export default {
  theme: {
    fill: theme => ({
      red: theme('colors.red.500'),
      green: theme('colors.green.500'),
      blue: theme('colors.blue.500'),
    }),
  },
}

Цвет обводки

Утилиты для стилизации обводки элементов SVG.

none
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.stroke-current {
  stroke: currentColor;
}
Персонализация
windi.config.js
export default {
  theme: {
    stroke: theme => ({
      red: theme('colors.red.500'),
      green: theme('colors.green.500'),
      blue: theme('colors.blue.500'),
    }),
  },
}

Штрих DashArray

Утилита stroke-dash - это утилита представления, определяющая узор штрихов и пробелов, используемых для рисования контура фигуры.

0
1
2
3
4
5
6
7
8
9
10
100
CSS
.stroke-dash-2 {
  stroke-dasharray: 2;
}

Штрих DashOffset

Утилита stroke-offset - это утилита представления, определяющая смещение при рендеринге связанного массива штрихов.

0
1
2
3
4
5
6
7
8
9
10
50
60
70
80
90
100
CSS
.stroke-offset-2 {
  stroke-dashoffset: 2;
}

Штрих LineCap

Утилита stroke-cap - это утилита представления, определяющая форму, которая будет использоваться в конце открытых подпутей, когда они строятся.

auto
square
round
CSS
.stroke-cap-auto {
  stroke-linecap: butt;
}

Штрих LineJoin

Утилита stroke-join - это утилита представления, определяющая форму, которая будет использоваться на углах путей при их обводке.

auto
bevel
round
CSS
.stroke-join-auto {
  stroke-linejoin: miter;
}

Ширина штриха

Утилиты для стилизации ширины обводки элементов SVG.

0
1
2
3
4
5
6
7
8
9
10
CSS
.stroke-1 {
  stroke-width: 1;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      strokeWidth: {
        sm: '4',
        lg: '8',
      },
    },
  },
}