I'm importing many FA icons:
import { faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt }
from '#fortawesome/free-solid-svg-icons'
library.add(faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt)
How can I declare that list once and then re-use it? Would it be an array? Or an object ... of what?
I was thinking
const icons = {faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt}
import icons from '#fortawesome/free-solid-svg-icons'
But of course that doesn't work. And what would I do for library.add()?
What is that object-looking thing that follows import ?
One solution is to create a new module that exports your specific icons.
// icons.js
export {
faUsers,
faCut,
faBullhorn,
faPenNib,
faCircle,
faPalette,
faVolumeUp,
faSmile,
faGrin,
faShekelSign,
faTv,
faUserTie,
faFolder,
faPaintBrush,
faCircleNotch,
faSignOutAlt
} from '#fortawesome/free-solid-svg-icons';
Then you can simply import your new module and consume it using spread syntax.
// library.js
import {library} from '#fortawesome/fontawesome-svg-core'
import * as icons from './icons';
library.add(...Object.values(icons));
import and export are defined to be statically analyzable, so they cannot depend on runtime information. Therefore, it is not possible with import statement.
The object looking like thing after import is called named imports that are used to get selected items from the list of exported items. For instance, fontawesome has all the icons objects exported via a single file. Now you can use import { ... } to import only the items you need.
Related
I want to import several entries from a module and assign to some alias. Is that possible? Currently I do
import {
mdiAlert,
mdiCheck,
mdiDelete,
... 40 more ...
} from '#mdi/js'
export default new Vuetify({
icons: {
values: {
mdiAlert,
mdiCheck,
mdiDelete,
... 40 more ...
}
}
})
Is is possible to import { one, two, three } as something from 'module' somehow to avoid code duplication?
No, you cannot import a few module entries into an object. You need to import the bindings under a local alias and then build the object from them separately.
What you can however do is to import the complete module as a namespace object:
import * as mdiValues from '#mdi/js'
export default new Vuetify({
icons: {
values: mdiValues,
}
})
I am trying to export a variable from the movimiento.js file to use it inCita.js, but before this, I have a file called index.js where I want to put all the variables of my files that I want to export to give an order to my application (I am using react)
When I want to use this variable I get the error that API is undefined. why?
index.js
import { Movimiento } from "./movimiento";
export { Movimiento };
Cita.js
import React, { useState } from "react";
import { StyleSheet, StatusBar, View } from "react-native";
import { STYLES } from "../../../../styles/styles";
import {
Container,
Header,
Item,
Icon,
Button,
Input,
Title,
Left,
Right,
Body,
Content,
Text,
Card,
CardItem,
Footer,
FooterTab,
DatePicker
} from "native-base";
import { HeaderCitas } from "../../../../Components/Header/HeaderCitas";
import { API } from "../../../../api/";
import { AppointmentList } from "../../../../Components/AppointmentList/AppointmentList";
const Cita = props => {
let citas = API.Movimento.getAppointments();
.
.
As T.J. Crowder said in his comment,
You're exporting a named export called Movimiento, but trying to import a named export called API. There isn't one, the name is Movimiento. Either: import { Movimiento } from "etc"; ...or if you want to rename it API: import { Movimiento as API } from "etc";
If he posts this as an answer, I will delete this, but I feel as though it needed to be posted as an answer.
Please take a look at the following import statement:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
Is it possible to give an alias to the name of the package that is being imported -- i.e., in this case to #fortawesome/react-fontawesome.
That way I wouldn't have to write out the entire project name each time.
For clarity sake, I'm looking for a final result where I could do something like this:
import { FontAwesomeIcon } from 'fa'
or this
import { FontAwesomeIcon } from '#custom/fa'
With fa (or #custom/fa) is a name that I created that references the actual #fortawesome/react-fontawesome library.
Is this possible? If so, how?
Im assuming you're using webpack. If so you can use the Webpack.resolve functionality. You just need to edit your webpack.config.js and setup like the following:
// webpack.config.js
module.exports = {
//...
resolve: {
alias: {
fa: path.resolve(__dirname, '#fortawesome/react-fontawesome')
}
}
//...
}
Your import would become
import { FontAwesomeIcon } from 'fa'
You could create a file that stores your dependencies in an object. I will call this file dependencies.js.
export default const dependencies = {
FA: '#fortawesome/react-fontawesome',
...
...
}
Then you can import these at the very top of each of your javascript files and use it to import further dependencies.
import dependencies from './dependencies';
import { FontAwesomeIcon } from dependencies.FA
I have a components folder in nuxt.js
/components/atoms/
and inside that folder I have an index.js to export all components dynamically
const req = require.context('./', true, /\.vue$/)
const components = {}
req.keys().forEach(fileName => {
const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')
components[componentName] = req(fileName).default
})
export const { ButtonStyled, TextLead, InputSearch } = components
so I can import perfectly as I wish
import { ButtonStyled } from "#/components/atoms"
the problem is that I am defining the variables to be exported statically, fixed, so for each created component I would need to add another variable manually
I need to dynamically export the variable name
Example:
DynamicCreation = ['ButtonStyled', 'TextLead', 'InputSearch']
export const { DynamicCreation } = components
// output -> export const { ButtonStyled, TextLead,InputSearch } = components
I need to export the name of already unstructured variables
Note: I can not use this export default components because I can not import like this import { ButtonStyled } from "#/components/atoms"
You should be able to do it like this:
export default components
Then in your file where you want to use the components:
import * as components from '#/components/atoms'
Then when you need to use the components in your Vue files, you need to map them:
#Component({
components: {
ButtonStyled: components.ButtonStyled
}
})
And now you have:
<ButtonStyled></ButtonStyled>
You can make something like this way, check if is what do you need.
Create a file to import a conjunct of components: allComponents.js
export default {
componentOne: require('./passToOneComponent.js');
componentTwo: require('./passToOneComponent.js');
componentThree: require('./passToOneComponent.js');
}
After in index.js export the allComponents.js with the name that you wish:
export {default as SomeName } from 'allComponents.js';
So in the final file, you can make something like:
import { SomeName } from 'index.js';
SomeName.componentOne();
I created a library that does this type of export, anyone who wants can install via npm
I created a Webpack Plugin that makes named exports from a component, maybe this helps other people
Weback Plugin - named-exports
I am creating a helper class in react. The image below shows my setup:
In my App.js, I have:
import Helpers from './Helpers.js'
I have also tried:
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import {Helpers} from './components/Helpers.js'
import {Helpers} from 'src/components/Helpers.js'
and I have also tried, in my Helpers.js:
export default Helpers
export default Helpers();
However, I receive an error message:
'./Helpers.js' does not contain an export named 'Helpers'.
It seems as though App.js can not find and locate this class. How can I import it, so i can just call the functions, like:
Helpers.helperFunctionHere();
thanks.
Option 1: Export each function individually
In Helpers.js
export function helperFunctionHere() {
console.log("hello there");
}
In App.js
import {helperFunctionHere} from "./Helpers";
render() {
helperFunctionHere();
}
Option 2: Static properties on the class
In Helpers.js
class Helpers {
static helperFunctionHere() {
console.log("hi");
}
}
export default Helpers
In App.js
import Helpers from "./Helpers";
render() {
Helpers.helperFunctionHere();
}
Should be export default Helpers. Am also assuming that your bundler is setup correctly.