From 18b588bcc71c1f52469ec820c3b70989fa053eec Mon Sep 17 00:00:00 2001 From: Artemiy Date: Thu, 29 Dec 2022 02:14:32 +0200 Subject: [PATCH] feat(icons): make ability ro use custom svg --- packages/icons/src/index.ts | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index f3d8f1664..c3729ec46 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -21,6 +21,9 @@ const svgPath: { [name: string]: string | GetPathCallback } = { }; export interface IconOptions { + svg?: string; + /** Svg path */ + p?: string; shape?: | 'rect' | 'star' @@ -40,7 +43,7 @@ export interface IconOptions { const STROKE = 0.8; -function insertSvg( +function generateSvg( width: number, height: number, stroke = 0, @@ -54,6 +57,10 @@ function insertSvg( height="${height}" viewBox="-${s} -${s} ${width + stroke} ${height + stroke}" >${content}`; + return svg; +} + +function insertSvg(svg: string) { const oParser = new DOMParser(); const oDOM = oParser.parseFromString(svg, 'image/svg+xml'); return oDOM.documentElement; @@ -63,20 +70,22 @@ type GetPathCallback = (opt?: IconOptions) => string; export function getIcon(opt: IconOptions = {}): IconPaint { // default values - const shape = opt.shape || 'circle'; - const color = opt.color || 'blue'; - const strokeColor = opt.strokeColor || 'white'; - const size = opt.size || 12; + const shape = opt.shape ?? 'circle'; + const color = opt.color ?? 'blue'; + const strokeColor = opt.strokeColor ?? 'white'; + const size = opt.size ?? 12; const anchor = size / 2; const defSize = 12; const stroke = typeof opt.stroke === 'number' ? opt.stroke : STROKE; const scale = size / defSize; - const pathAlias = svgPath[shape] || 'circle'; + const pathAlias = opt.p || svgPath[shape] || 'circle'; const path = typeof pathAlias === 'string' ? pathAlias : pathAlias(opt); - const svg = insertSvg(size, size, stroke * scale, path); + const svg = insertSvg( + opt.svg || generateSvg(size, size, stroke * scale, path), + ); const fistChild = svg.firstChild as SVGElement; const transform = `scale(${scale})`;