From 2fc81ae9d8dedf822760dfc96c321bddf6770b04 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Tue, 21 Feb 2023 09:04:06 +0200 Subject: [PATCH] fix(iconify-icon): correctly handle unset width/height in svg mode --- iconify-icon/icon/README.md | 4 ++-- iconify-icon/icon/demo/usage.html | 3 ++- iconify-icon/icon/package.json | 2 +- iconify-icon/icon/src/render/svg.ts | 15 ++++++++++++++- iconify-icon/react/package.json | 2 +- iconify-icon/solid/package.json | 2 +- 6 files changed, 21 insertions(+), 7 deletions(-) diff --git a/iconify-icon/icon/README.md b/iconify-icon/icon/README.md index 5e84d6c..264ddb4 100644 --- a/iconify-icon/icon/README.md +++ b/iconify-icon/icon/README.md @@ -20,13 +20,13 @@ Iconify Icon web component renders icons. Add this line to your page to load IconifyIcon (you can add it to `` section of the page or before ``): ```html - + ``` or ```html - + ``` or, if you are building a project with a bundler, you can include the script by installing `iconify-icon` as a dependency and importing it in your project: diff --git a/iconify-icon/icon/demo/usage.html b/iconify-icon/icon/demo/usage.html index c67c0e9..b4fb752 100644 --- a/iconify-icon/icon/demo/usage.html +++ b/iconify-icon/icon/demo/usage.html @@ -50,10 +50,11 @@ @keyframes animate-unset { 0% { width: 24px; + height: 24px; color: #000; } 50% { - width: 64px; + width: 128px; height: 64px; color: #800; } diff --git a/iconify-icon/icon/package.json b/iconify-icon/icon/package.json index fde09f8..a082663 100644 --- a/iconify-icon/icon/package.json +++ b/iconify-icon/icon/package.json @@ -2,7 +2,7 @@ "name": "iconify-icon", "description": "Icon web component that loads icon data on demand. Over 150,000 icons to choose from", "author": "Vjacheslav Trushkin (https://iconify.design)", - "version": "1.0.6", + "version": "1.0.7", "license": "MIT", "main": "./dist/iconify-icon.cjs", "types": "./dist/iconify-icon.d.ts", diff --git a/iconify-icon/icon/src/render/svg.ts b/iconify-icon/icon/src/render/svg.ts index f2b2258..c708f6c 100644 --- a/iconify-icon/icon/src/render/svg.ts +++ b/iconify-icon/icon/src/render/svg.ts @@ -7,7 +7,20 @@ import { iconToHTML } from '@iconify/utils/lib/svg/html'; export function renderSVG(data: IconifyIconBuildResult): Element { const node = document.createElement('span'); + // Add style if needed + const attr = data.attributes as Record; + let style = ''; + if (!attr.width) { + style = 'width: inherit;'; + } + if (!attr.height) { + style += 'height: inherit;'; + } + if (style) { + attr.style = style; + } + // Generate SVG - node.innerHTML = iconToHTML(data.body, data.attributes); + node.innerHTML = iconToHTML(data.body, attr); return node.firstChild as HTMLElement; } diff --git a/iconify-icon/react/package.json b/iconify-icon/react/package.json index 6351ef2..c17a356 100644 --- a/iconify-icon/react/package.json +++ b/iconify-icon/react/package.json @@ -2,7 +2,7 @@ "name": "@iconify-icon/react", "description": "React wrapper for Iconify Icon web component", "author": "Vjacheslav Trushkin", - "version": "1.0.6", + "version": "1.0.7", "license": "MIT", "bugs": "https://github.com/iconify/iconify/issues", "homepage": "https://iconify.design/", diff --git a/iconify-icon/solid/package.json b/iconify-icon/solid/package.json index ed1c39a..fcfd0b4 100644 --- a/iconify-icon/solid/package.json +++ b/iconify-icon/solid/package.json @@ -3,7 +3,7 @@ "type": "module", "description": "SolidJS wrapper for Iconify Icon web component", "author": "Vjacheslav Trushkin", - "version": "1.0.6", + "version": "1.0.7", "license": "MIT", "bugs": "https://github.com/iconify/iconify/issues", "homepage": "https://iconify.design/",