使用字体真棒图标在 React 中发生冲突答案

【问题标题】：Conflict in React using font-awesome icons使用字体真棒图标在 React 中发生冲突
【发布时间】：2021-03-12 14:33:12
【问题描述】：

大家晚上好。我对使用字体真棒图标的 React 有一些问题。我想从 font awesome 导入 3 个圆圈，2 个应该始终是空的/常规的，一个是完整的/实心的。我的问题是，当我按照我的方式导入它时，我得到了错误，因为那个 faCircle 已经被定义了。如何使用同名的实心和常规图标？

import React from "react";
import MotionLeft from '../../Components/MotionLeft';
import {SectionStyled, StyleRow } from './styles';

//Font Awesome
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faEnvelope, faCircle} from '@fortawesome/free-solid-svg-icons';
import {faCircle} from '@fortawesome/free-regular-svg-icons';


const SignUp = () =>{
  
    
    return (

            <StyleRow >
                <MotionLeft/>
                <SectionStyled>
                <div class="right">
                    <div class="header">
                        <p>Already have an account?</p>
                        <button>Sign In</button>
                    </div>
                    <main>
                        <h1>Sign Up</h1>
                        <div class="name">
                            <FontAwesomeIcon className="i" icon={faEnvelope} size = '1x'/>                           
                            <input type="email" placeholder="Email"/>
                        </div>
                    </main>
                    <button class="signup">Sign Up</button>
                    <div className="progress-dots">
                        <FontAwesomeIcon className="i" icon={faCircle} size = '1x'/>  
                        <FontAwesomeIcon className="i" icon={faCircle} size = '1x'/> 
                        <FontAwesomeIcon className="i" icon={faCircle} size = '1x'/> 
                    </div>  
                </div>
                </SectionStyled>
            </StyleRow>
        )
};

export default SignUp;

【问题讨论】：

标签： reactjs font-awesome

【解决方案1】：

This link should help

您可以将它们导入为不同的名称

import {faCircle as faRegCircle} from '@fortawesome/free-regular-svg-icons';

【讨论】：

@Michaela 当然，没问题：)

【解决方案2】：

您可以将冲突图标的名称之一重命名为as，例如，我采用@fortawesome/free-regular-svg-icons的一种形式并将其重命名如下：

import {faCircle as faCircleRegular} from '@fortawesome/free-regular-svg-icons';

稍后，当您引用该图标时，请使用其新名称：

 <FontAwesomeIcon className="i" icon={faCircleRegular} size = '1x'/>

这应该可以解决冲突问题。随便选一个icon都可以，我随便选了一个。

【讨论】：