'How can I import a specific JS file from a Node module?
I'm using the Phosphor-react node module (https://github.com/phosphor-icons/phosphor-react) and I would like to create a custom icon so that I can have different weights, and be able to pass the same props I can pass to an already created Phospor icon.
Here's an example icon code:
import React, { forwardRef } from 'react';
import { renderPathForWeight } from 'phosphor-react/lib/index.esm.js';
import IconBase from 'phosphor-react/lib/IconBase.esm.js';
/* GENERATED FILE */
var pathsByWeight = /*#__PURE__*/new Map();
pathsByWeight.set("bold", function (color) {
return React.createElement(React.Fragment, null, React.createElement("polyline", {
points: "24 128 56 128 96 40 160 208 200 128 232 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "24"
}));
});
pathsByWeight.set("duotone", function (color) {
return React.createElement(React.Fragment, null, React.createElement("polyline", {
points: "24 128 56 128 96 40 160 208 200 128 232 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
pathsByWeight.set("fill", function () {
return React.createElement(React.Fragment, null, React.createElement("path", {
d: "M160,216h-.4a8.1,8.1,0,0,1-7.1-5.2L95.4,60.8,63.3,131.3A8,8,0,0,1,56,136H24a8,8,0,0,1,0-16H50.9L88.7,36.7A8.2,8.2,0,0,1,96.3,32a8,8,0,0,1,7.2,5.2L161,188.1l31.8-63.7A8.2,8.2,0,0,1,200,120h32a8,8,0,0,1,0,16H204.9l-37.7,75.6A8.2,8.2,0,0,1,160,216Z"
}));
});
pathsByWeight.set("light", function (color) {
return React.createElement(React.Fragment, null, React.createElement("polyline", {
points: "24 128 56 128 96 40 160 208 200 128 232 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "12"
}));
});
pathsByWeight.set("thin", function (color) {
return React.createElement(React.Fragment, null, React.createElement("polyline", {
points: "24 128 56 128 96 40 160 208 200 128 232 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "8"
}));
});
pathsByWeight.set("regular", function (color) {
return React.createElement(React.Fragment, null, React.createElement("polyline", {
points: "24 128 56 128 96 40 160 208 200 128 232 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
var renderPath = function renderPath(weight, color) {
return renderPathForWeight(weight, color, pathsByWeight);
};
export var Activity = /*#__PURE__*/forwardRef(function (props, ref) {
return React.createElement(IconBase, Object.assign({
ref: ref
}, props, {
renderPath: renderPath
}));
});
Activity.displayName = "Activity";
The problem is that these import don't work:
import { renderPathForWeight } from 'phosphor-react/lib/index.esm.js';
import IconBase from 'phosphor-react/lib/IconBase.esm.js';
I get error:
Module not found: Can't resolve 'node-modules/phosphor-react/lib/index.esm.js' in '.../myapp/src/components/Icons'
How can I import these files?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
