Logo Windi CSS

SVG

Цвет заливки

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

none
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
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
 Персонализация 
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
Штрих DashOffset 
Утилита stroke-offset - это утилита представления, определяющая смещение при рендеринге связанного массива штрихов.
0
1
2
3
4
5
6
7
8
9
10
50
60
70
80
90
100
CSS
Штрих LineCap 
Утилита stroke-cap - это утилита представления, определяющая форму, которая будет использоваться в конце открытых подпутей, когда они строятся.
auto
square
round
CSS
Штрих LineJoin 
Утилита stroke-join - это утилита представления, определяющая форму, которая будет использоваться на углах путей при их обводке.
auto
bevel
round
CSS
Ширина штриха 
Утилиты для стилизации ширины обводки элементов SVG.
0
1
2
3
4
5
6
7
8
9
10
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      strokeWidth: {
        sm: '4',
        lg: '8',
      },
    },
  },
}