2
0
mirror of https://github.com/iconify/iconify.git synced 2025-02-02 03:58:25 +00:00

fix(iconify-icon): correctly handle unset width/height in svg mode

This commit is contained in:
Vjacheslav Trushkin 2023-02-21 09:04:06 +02:00
parent 0d5431deac
commit 2fc81ae9d8
6 changed files with 21 additions and 7 deletions

View File

@ -20,13 +20,13 @@ Iconify Icon web component renders icons.
Add this line to your page to load IconifyIcon (you can add it to `<head>` section of the page or before `</body>`): Add this line to your page to load IconifyIcon (you can add it to `<head>` section of the page or before `</body>`):
```html ```html
<script src="https://code.iconify.design/iconify-icon/1.0.6/iconify-icon.min.js"></script> <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
``` ```
or or
```html ```html
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.6/dist/iconify-icon.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.7/dist/iconify-icon.min.js"></script>
``` ```
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: 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:

View File

@ -50,10 +50,11 @@
@keyframes animate-unset { @keyframes animate-unset {
0% { 0% {
width: 24px; width: 24px;
height: 24px;
color: #000; color: #000;
} }
50% { 50% {
width: 64px; width: 128px;
height: 64px; height: 64px;
color: #800; color: #800;
} }

View File

@ -2,7 +2,7 @@
"name": "iconify-icon", "name": "iconify-icon",
"description": "Icon web component that loads icon data on demand. Over 150,000 icons to choose from", "description": "Icon web component that loads icon data on demand. Over 150,000 icons to choose from",
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)", "author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
"version": "1.0.6", "version": "1.0.7",
"license": "MIT", "license": "MIT",
"main": "./dist/iconify-icon.cjs", "main": "./dist/iconify-icon.cjs",
"types": "./dist/iconify-icon.d.ts", "types": "./dist/iconify-icon.d.ts",

View File

@ -7,7 +7,20 @@ import { iconToHTML } from '@iconify/utils/lib/svg/html';
export function renderSVG(data: IconifyIconBuildResult): Element { export function renderSVG(data: IconifyIconBuildResult): Element {
const node = document.createElement('span'); const node = document.createElement('span');
// Add style if needed
const attr = data.attributes as Record<string, string>;
let style = '';
if (!attr.width) {
style = 'width: inherit;';
}
if (!attr.height) {
style += 'height: inherit;';
}
if (style) {
attr.style = style;
}
// Generate SVG // Generate SVG
node.innerHTML = iconToHTML(data.body, data.attributes); node.innerHTML = iconToHTML(data.body, attr);
return node.firstChild as HTMLElement; return node.firstChild as HTMLElement;
} }

View File

@ -2,7 +2,7 @@
"name": "@iconify-icon/react", "name": "@iconify-icon/react",
"description": "React wrapper for Iconify Icon web component", "description": "React wrapper for Iconify Icon web component",
"author": "Vjacheslav Trushkin", "author": "Vjacheslav Trushkin",
"version": "1.0.6", "version": "1.0.7",
"license": "MIT", "license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues", "bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/", "homepage": "https://iconify.design/",

View File

@ -3,7 +3,7 @@
"type": "module", "type": "module",
"description": "SolidJS wrapper for Iconify Icon web component", "description": "SolidJS wrapper for Iconify Icon web component",
"author": "Vjacheslav Trushkin", "author": "Vjacheslav Trushkin",
"version": "1.0.6", "version": "1.0.7",
"license": "MIT", "license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues", "bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/", "homepage": "https://iconify.design/",