vectopus / atlas-icons-react Goto Github PK

I'm having an issue making the icons work with a className attribute to change colors.

Here's how tabler/icons had it implemented

import { FC, SVGAttributes } from 'react';

type TablerIconProps = Omit<SVGAttributes<SVGElement>, 'color' | 'stroke'> & {
  color?: SVGAttributes<SVGElement>['stroke'];
  size?: SVGAttributes<SVGElement>['width'];
  stroke?: SVGAttributes<SVGElement>['strokeWidth'];
}

type TablerIcon = FC<TablerIconProps>;

Hello,

Thank's for your wonderful package!
We have been trying to use it in a fresh React app using Vite JS and we encountered the following error in the Chrome dev tool console.

Do you have an idea how to fix it ?

Best regards

I've trying to use the React library and it looks like this package may not include all the icons from the parent library. Is this accurate?

One example happens when trying to utilize one of the download icons by first importing it:

import { NavigationMoveMovementArrowDirectionPointerNavigateDownDownload } from '@vectopus/atlas-icons-react';

Then add it to the render function:

<NavigationMoveMovementArrowDirectionPointerNavigateDownDownload size={24} />

This results in the following error:
Attempted import error: 'NavigationMoveMovementArrowDirectionPointerNavigateDownDownload' is not exported from '@vectopus/atlas-icons-react'.

Getting this error with version 0.0.10, didn't have any error before on 0.0.7, not sure what changed?

node_modules/@vectopus/atlas-icons-react/index.js:1
import _extends from '@babel/runtime/helpers/extends';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Hey there!

Yarn still is in 0.0.7

https://yarnpkg.com/package/@vectopus/atlas-icons-react

I am getting the error below when I save the file (transpiles Typescript):

Field 'browser' doesn't contain a valid alias configuration

It seems like it's not finding a directory of some sort?

Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/p009509B/Sharepoint/spfx-pweb-home/node_modules/@vectopus/atlas-icons-react/node_modules doesn't exist or is not a directory
      /Users/11221222/Sharepoint/spfx-pweb-home/node_modules/@vectopus/atlas-icons-react/lib doesn't exist or is not a directory
      /Users/11221222/Sharepoint/spfx-pweb-home/node_modules/@vectopus/node_modules doesn't exist or is not a directory
      /Users/11221222/Sharepoint/spfx-pweb-home/node_modules/@vectopus/lib doesn't exist or is not a directory

this is how the folder looks like in node_modules:

I am using

• "react": "17.0.1"
• "react-dom": "17.0.1"

I am not sure if I installed incorrectly or have configured something wrong. Please advise.

I'm having a hard time trying to import an icon in a nextjs app using this library.

info  - Creating an optimized production build
Failed to compile.

./node_modules/@vectopus/atlas-icons-react/index.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders
> import _extends from '@babel/runtime/helpers/extends';
| import * as React from 'react';
|

Import trace for requested module:
./node_modules/@vectopus/atlas-icons-react/index.js
./components/UserCategoryManagement.tsx

> Build failed because of webpack errors
error Command failed with exit code 1.

Repro:
Just import any icon and try to build the app.

Env:
Next.js v13.0.7
Node v18.12.1

Not related but also consider adding support for TS so users don't have to create a .d.ts file.

Thanks for these amazing icons!