properties
changelog

SVG Stroke

Set SVG element's stroke thickness (width), color, opacity and scaling effect.

Usage:

  • @svg stroke-*;
  • @svg stroke-color-*;
  • @svg stroke-opacity-*;
  • @svg stroke-scale-*;

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		svg: {
			stroke: {
				DEFAULT: {
					property: "stroke-width: <v><i>;",
					resolve: "spacing",
					values: {
						0: "0px",
						0.5: "0.5px",
						1: "1px",
						1.5: "1.5px",
						2: "2px",
					},
				},

				color: {
					property: "stroke: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},

				opacity: {
					property: "stroke-opacity: <v><i>;",
					themeKey: "fractions",
					values: {},
				},

				scale: {
					property: "vector-effect: <v><i>;",
					values: {
						DEFAULT: "none",
						none: "non-scaling-stroke",
					},
				},
			},
		},
	},
};

export default shilpConfig;