Comments (6)
kristerkari
commented on May 27, 2024
Is there any breaking change which is not mentioned?
Yeah 0.14 enabled SVGO, which in theory does not mean breaking changes, but in reality it did break things.
from react-native-svg-transformer.
kristerkari
commented on May 27, 2024
@ptfly Could you please provide a full example to reproduce the bug? I tried to reproduce the bug, but wasn't able to do it because probably I'm not doing exactly what you are doing.
from react-native-svg-transformer.
ptfly
commented on May 27, 2024
There is nothing more then the code above. I just removed the path for readability sake. Could be my SVGs, but they are quite standard. Here is an example icon:
<svg width="14px" height="10px" viewBox="0 0 14 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dropdown" transform="translate(-270.000000, -17.000000)" fill="#000000">
<path d="M277.731744,18.0625377 C277.680272,18.0241534 277.625577,17.9902943 277.568269,17.9613392 C277.507675,17.9134899 277.442485,17.8717683 277.373656,17.8367871 C277.30272,17.8140644 277.229709,17.7984191 277.15569,17.79008 C277.014165,17.7431734 276.861283,17.7431734 276.719758,17.79008 C276.645739,17.7984191 276.572728,17.8140644 276.501792,17.8367871 C276.432963,17.8717683 276.367773,17.9134899 276.307179,17.9613392 C276.249871,17.9902943 276.195175,18.0241534 276.143704,18.0625377 L270.305325,24.290142 C269.874353,24.762213 269.903048,25.4930642 270.369707,25.9298913 C270.836366,26.3667183 271.567519,26.3471402 272.010132,25.8859656 L277,20.5691484 L281.989868,25.8859656 C282.432481,26.3471402 283.163634,26.3667183 283.630293,25.9298913 C284.096952,25.4930642 284.125647,24.762213 283.694675,24.290142 L277.731744,18.0625377 Z" id="Shape" transform="translate(277.000000, 22.000000) scale(1, -1) translate(-277.000000, -22.000000) "></path>
</g>
</g>
</svg>
I'm using them like that:
const Icon = {
AngleDown:require('../../assets/svg/angle-down.svg').default,
....
};
Then
<Icon.AngleDown fill={color}/>
from react-native-svg-transformer.
kristerkari
commented on May 27, 2024
Alright, I'll try to reproduce with that example.
from react-native-svg-transformer.
kristerkari
commented on May 27, 2024
@ptfly I managed to reproduce the bug, so I released a fix in 0.14.3. Could you please try it out and see if it fixes the issue for you?
from react-native-svg-transformer.
ptfly
commented on May 27, 2024
Yes, now it looks fine! Thanks for the fix!
from react-native-svg-transformer.
Related Issues (20)
- After install package react-native-svg-transformer unable to run project HOT 1
- Identifier 'Svg' has already been declared HOT 6
- Import local svg without extension
- TypeError: Cannot read properties of undefined (reading 'has') HOT 2
- svg does not display properly when used with styled-components HOT 2
- Could we add support for optional import svg as a string not a `SvgComponent`? HOT 1
- Fails to find react-native-babel-transformer when used with React Native 0.73 because the package has been renamed HOT 4
- RN 0.73 compatibility HOT 1
- metro-react-native-babel-transformer needs to be replaced in RN 0.73 HOT 11
- Latest Expo SDK 50 beta adds new upstream transformer, causing bundle failure HOT 1
- EXPO RN Cannot display SVG, issue with RNSVGPath
- Expo SDK 50 crashes when apply metro config HOT 2
- Expo SDK 50 - cannot read properties of undefined (reading 'cacheable') HOT 2
- Unexpected import of expo metro config HOT 4
- missing-asset-registry-path HOT 1
- React native svg transformer does not color svg using replaceAttrValues HOT 4
- Expo 50 Solution
- Unable to resolve 'path' in @svgr/core HOT 2
- metro.config.js 配置多个 babelTransformerPath
- Solution to TypeError: Cannot read properties of undefined (reading '0') 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 react-native-svg-transformer.