Comments (8)
Yep, good call. I think 1em is also not supported in Safari? I'll have to double check that.
from astro-icon.
Don't know, haven't tested attributes yet. Using rem through CSS atm which works on iOS Safari.
from astro-icon.
This is all a side effect of using Sprite.
In the past (in v0), only width
needed to be given, and height was automatically calculated based on the aspect ratio.
Now after migrating to v1, it can be solved by specifying font-size
or completing height
, although there are warnings 🤔.
In addition, #astroicon:{name}
needs to be changed to #ai:local:{name}
. This seems to be not mentioned in the migration document.
from astro-icon.
In the past (in v0), only width needed to be given, and height was automatically calculated based on the aspect ratio.
Now after migrating to v1, it can be solved by specifying font-size or completing height, although there are warnings 🤔.
If you could share the specific warnings you're getting and where you see them, that would be very helpful!
In addition, #astroicon:{name} needs to be changed to #ai:local:{name}. This seems to be not mentioned in the migration document.
I'm not sure how you're using the id, but these aren't mentioned in the migration guide because the generated ids are not part of the public API. The [data-icon="name"]
attribute is the stable, public way to reference an icon.
from astro-icon.
the warning is that the problem with the previous version is gone now🥰 I only gave width before and now complete height.
I'm not sure how you're using the id, but these aren't mentioned in the migration guide because the generated ids are not part of the public API. The
[data-icon="name"]
attribute is the stable, public way to reference an icon.
This is how I use it, I don’t know if there is a better way than how I use it.
from astro-icon.
Interesting, I haven't really considered how client-side usage should work yet. I guess that's fine if you know that icon is already defined on the page somewhere.
from astro-icon.
@natemoo-re if you input width="1rem"
the type linter reports an error that you're providing a string type to a number type.
interface Props extends HTMLAttributes<"svg"> {
name: Icon;
"is:inline"?: boolean;
title?: string;
size?: number | string;
width?: number | string;
height?: number | string;
}
Adding the union type of string resolves the issue.
from astro-icon.
Hello,
Having the same linter errors when using a string for size
, width
or height
, I did fix it by modifying the Props type this way:
interface Props extends HTMLAttributes<"svg"> {
name: Icon;
"is:inline"?: boolean;
title?: string;
size?: HTMLAttributes<"svg">["width"];
}
width
andheight
beeing already defined onHTMLAttributes<"svg">
asnumber | string | undefined | null
it doesn't seem necessary to add them to the extended interface.- then
size
type can be defined as the type ofwidth
.
In the current version, it is interesting to note that the infered type of normalizedProps
includes width: number | string
and height: number | string
because of IconifyIconBuildResult
defining width
and height
as strings
.
Happy to submit a PR if this helps.
from astro-icon.
Related Issues (20)
- [v1] local Capitalized icons are imported as lowercase on macOS HOT 1
- Automatically include all statically-referenced icons HOT 2
- Consider use case where icons are set in a cms HOT 1
- Spites by default - I just want inline SVGs HOT 2
- Reference to sprite lost in dynamic usage
- [INFO] weird defs behaviour while using svgo optimization gradients
- Incorrect image sizes in the latest version (1.0.3) HOT 1
- Sub-folders icons doesn't work unless the dev server restarted HOT 1
- Failed to import SVG containing an <image> element HOT 1
- "Unable to locate X icon!" without restarting dev server HOT 9
- The deprecated `xlink:href` attribute should be replaced with `href`
- I get this error: Unable to load the "local" icon set! HOT 1
- depedency @iconify/tools v3 comes with incorrect types for cheerio (fixed in v4) HOT 1
- Cannot alter stroke width
- Rendering Issue with Adjusted viewBox SVGs in astro-icon v1.1.0
- Icon props: Accept `size?: string` to pass size units
- Missing Props.ts file referenced in Readme.md
- Generated IDs on symbol elements are not valid XML
- Cannot change color of icon using styling HOT 1
- feature: Disable optimized sprites HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from astro-icon.