I wanted to know if there is any guide to be able to create a dependency that is an icon library for react, I have a list of .svg and I want to create a library where you then upload it to NPM and installing in a project I can use the icons for examples as follows.
import { EyeIcon } from 'custom-icons'
export default function App() {
return(
<EyeIcon />
)
}
Thank you
Related
Ok I've looked everywhere and there is no documentation on this Babel module
--babel-plugin-named-asset-import
can someone please explain what it is for and how it works.
Looks like its purpose is to import named exports from non JS/CSS assets. Currently, within the CRA, it appears to only be implemented for svg assets. The goal is to offer another way to import SVGs as React components versus the standard import as a url that needs to be applied to an img element.
Without plugin (default import)
import * as React from 'react';
import logo from './logo.png'; // import file as a url
function Header() {
return <img src={logo} alt="logo" />;
}
export default Header;
With plugin (named import)
import * as React from 'react';
import { ReactComponent as Logo } from './logo.svg'; // import file as a React component
function Header() {
return <Logo />;
}
export default Header;
Update
Going deeper, it appears that the plugin aids in importing svg files in the following ways:
import logo from "logo.svg"; // default import
import { logoUrl } from "logo.svg"; // named import
import { ReactComponent as Logo } from "#svgr/webpack?-svgo!logo.svg"; // ReactComponent import
The CRA specifically targets svg file formats as shown in their test suites. As to whether or not it supports other non-js files, not likely (especially since the babel plugin is only utilized once in the CRA webpack config).
As mentioned in the svgr docs:
SVGR can be used as a webpack loader, this way you can import your SVG directly as a React Component.
This particular plugin aims to import any svg file as the default export.
Please note that by default, #svgr/webpack will try to export the React Component via default export if there is no other loader handling svg files with default export.
Whereas the CRA appears to utilize file/url loader for the default/named exports and specifically maps a ReactComponent named export to the svgr webpack plugin.
I'm trying to use Atomize (https://atomizecode.com/) with Gatsby JS (https://www.gatsbyjs.org/) and while it is successfully installed, the atomize components are not being rendered to the page.
I am trying to import a button to start "Hey", and while it renders something it is not the standard button component. Also, even though the button component is imported, I get the warning that reads it is not being used.
I am wrapping atomize around gatsby app by the following way:
import React from "react"
import { StyleReset } from "atomize"
export const wrapRootElement = ({ element }) => (
<>
<StyleReset />
{element}
</>
)
Did you install styletron toolkit?
According to their docs it's a dependency and looking at their package.json it's defined under peerDependencies which means it won't get installed along with atomize.
Styletron's docs sugggets using gatsby-plugin-styletron for Gatsby.
Hope that helps.
I get this error when importing semantic > Can't resolve 'semantic-ui-react' <
(i've installed semantic and did gulp build and all that)
I tried this
import React from 'react'
import { Button } from 'semantic-ui-react'
const ButtonExampleButton = () => (
<Button>Click Here</Button>
)
export default ButtonExampleButton
In order to use the react components of semantic ui, you will need to install the semantic-ui-react library.
Note that this library doesn't include the CSS files of semantic-ui and you will need to include it yourself.
Either via a CDN or a npm package. See the docs for examples.
SnapSVG extension for Adobe Animate.cc 2017 is able to create interactivity and animations for the web. I'm currently trying to use an exported SnapSVG Adobe Animate.cc project in my REACT JS WebApplication.
What I did so far
Published html file from a SnapSVG project(Animate.cc 2017)
Copyed custom json file created from the SnapSVG project in animate.cc in my React app.
Installed SnapSVG from npm install in my React App.
Imported the js file copyed from the html publication created from animate.cc by importing the code. ( SnapSVG-animator isn't available in npm)
The custom json file from animate.cc/snap svg project is loaded async and will be added to the SVGAnim(SnapSVGAnimator.min.js) function object which will create the svg animation in de browser.
The code
import axios from 'axios';
import snapsvg from 'snapsvg';
import { SVGAnim } from './SnapSVGAnimator.min.js';
let jsonfile = "circle.json",
responseType: 'json';
componentDidMount(){
axios.get(jsonfile)
.then(response => {
const json = response.request.responseText;
const animatedSVG = new SVGAnim(json);
});
}
Problem
The SnapSVGAnimator.min.js creates warnings and errors when it's imported in the JSX file. Looks like something going wrong with compiling these code.
✖ 1557 problems (110 errors, 1447 warnings)
First, install the following libraries:
npm install --save snapsvg-animator snapsvg-cjs
given your json is at ../../public/myAnimation.json do the following:
import React, { useEffect } from 'react';
import SVGAnim from "snapsvg-animator";
import "snapsvg-cjs";
const myAnimation = require('../../public/myAnimation.json'); //import your json
function Home() {
const svg = new SVGAnim(
myAnimation,
200, //width
220, //height
40 //fps
);
useEffect(() => {
const container = document.getElementById('animation');
container.appendChild(svg.s.node);
});
return (
<div id="main">
<div id="animation"/>
</div>
)
};
export default Home;
I am using react hooks because it is all the rage ☺ but it's working with "render" and "componentDidMount" all the same.
I create a new React Native project and install #shoutem/ui in project and include the Examples component of Shoutem UI into React Native app.
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '#shoutem/ui';
class HelloWorld extends Component {
render() {
return (
<Examples />
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
But when I run start the project , I get "Unknown named module: 'react/lib/NativeMethodsMixin'" error.
The bug seems to be inside the #shoutem/animation module, in the Parallax.js file: https://github.com/shoutem/animation/blob/develop/Parallax.js
NativeMethodsMixin is not imported correctly from react:
If you change this:
import NativeMethodsMixin from 'react/lib/NativeMethodsMixin';
to this: import NativeMethodsMixin from 'react';
your app should work.
I would either file a Github issue on the #shoutem/animation project or check if the way NativeMethodsMixin is imported is specific to an older version of react and then use that version in your app.
I hope this helps.
This is fixed as of v0.8.9 release of #shoutem/animation.