리액트 아이콘 스타일링 방법
를 사용하여 Import한 아이콘을 스타일링하는 방법을 찾고 있습니다.
특히 다음과 같은 룩을 연출할 수 있으면 좋겠습니다.
즉, 배경색, 패딩, 테두리 반지름 등을 추가하고 싶습니다.하지만 저는 그렇게 할 수 있는 쉬운 방법을 찾을 수 없습니다.
사이즈와 컬러 소품을 추가하면 아이콘의 실제 크기와 색상이 바뀝니다.하지만 다른 요소들을 바꿀 수 있는 쉬운 방법은 없습니다.
이 방법을 알고 있는 분(혹은 다른 라이브러리를 추천해 주실 수 있습니까?)
IconContext참조할 수 있습니다.
function BlueLargeIcon() {
return (
<IconContext.Provider
value={{ color: 'blue', size: '50px' }}
>
<div>
<FaBeer />
</div>
</IconContext.Provider>
);
}
컴포넌트를 , 「」를 사용합니다.style컴포넌트 자체에서 동일한 API(구성 참조)를 제공하거나 사용합니다.
const style = { color: "white", fontSize: "1.5em" }
<FaFacebookF style={style} />
// API
<FaFacebookF color="white" fontSize="1.5em" />
일부 아이콘의 색상은 변경할 수 없습니다.를 들어, 저는 예, 는, 색, 나, 나, 나, 나의 색깔을 바꾸려고 했습니다.{ GrClose }아이콘을 클릭합니다.
<GrClose
className="icon"
style={{
position: 'absolute',
top: '20px',
right: '20px',
}}
size="50px"
color="white"
onClick={handleExit}
/>
아이콘을 다음 아이콘으로 교체했을 때도 변하지 않았습니다.{ AiOutlineClose }★★★★★★★★★★★★★★★★★★★!
서 은 그냥 시키는 것 요.className스타일을 적용할 아이콘에 직접 소품합니다.CodeSandbox의 소스 코드.난 여기서 순풍 수업을 이용했지만, 너도 네 수업을 쉽게 이용할 수 있어.
import React from "react";
import "./styles.css";
import {
FaFacebookF,
FaTwitter,
FaInstagram,
FaPinterest
} from "react-icons/fa";
export default function App() {
let circleClasses = "inline-block p-7 rounded-full w-20 mx-auto";
let iconStyles = { color: "white", fontSize: "1.5em" };
return (
<div className="App grid grid-cols-2 sm:grid-cols-4 gap-2 w-3/4 mx-auto">
<h1 className="col-span-full">Icon Demo</h1>
<span style={{ background: "#3B5998" }} className={circleClasses}>
<FaFacebookF style={iconStyles} />
</span>
<span style={{ background: "#1DA1F2" }} className={circleClasses}>
<FaTwitter style={iconStyles} />
</span>
<span style={{ background: "black" }} className={circleClasses}>
<FaInstagram style={iconStyles} />
</span>
<span style={{ background: "#BD081C" }} className={circleClasses}>
<FaPinterest style={iconStyles} />
</span>
</div>
);
}
어떻게 동작하는지 좀 더 자세히 알고 싶으시면 리액트 아이콘의 소스 코드를 살펴보실 수 있습니다.리액트 아이콘 내에서 IconContext가 정의되어 있는 위치를 보면 다음과 같은 소품이 허용됩니다.
export interface IconContext {
color?: string;
size?: string;
className?: string;
style?: React.CSSProperties;
attr?: React.SVGAttributes<SVGElement>;
}
export const DefaultContext: IconContext = {
color: undefined,
size: undefined,
className: undefined,
style: undefined,
attr: undefined,
};
export const IconContext: React.Context<IconContext> = React.createContext && React.createContext(DefaultContext);
색상, 크기, 스타일, 추가 svg 속성 및 className 문자열까지 전달할 수 있습니다.단, 이를 위해서는 컨텍스트에서 Icon 컴포넌트를 랩해야 합니다.
react-icon을 설치하면 모든 아이콘이 다음과 같은 형식으로 node_modules 디렉토리에 추가됩니다.
// THIS FILE IS AUTO GENERATED
var GenIcon = require('../lib').GenIcon
module.exports.Fa500Px = function Fa500Px (props) {
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 448 512"},"child":[{"tag":"path","attr":{"d":"M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7 8.5-28.6 53 0 89.4-10.1 89.4-64.4 0-61-77.1-89.6-116.9-44.6-23.5 26.4-17.6 42.1-17.6 157.6 50.7 31 118.3 22 160.4-20.1 24.8-24.8 38.5-58 38.5-93 0-35.2-13.8-68.2-38.8-93.3-24.8-24.8-57.8-38.5-93.3-38.5s-68.8 13.8-93.5 38.5c-.3.3-16 16.5-21.2 23.9l-.5.6c-3.3 4.7-6.3 9.1-20.1 6.1-6.9-1.7-14.3-5.8-14.3-11.8V20c0-5 3.9-10.5 10.5-10.5h241.3c8.3 0 8.3 11.6 8.3 15.1 0 3.9 0 15.1-8.3 15.1H130.3v132.9h.3c104.2-109.8 282.8-36 282.8 108.9 0 178.1-244.8 220.3-310.1 62.8zm63.3-260.8c-.5 4.2 4.6 24.5 14.6 20.6C306 56.6 384 144.5 390.6 144.5c4.8 0 22.8-15.3 14.3-22.8-93.2-89-234.5-57-238.3-38.2zM393 414.7C283 524.6 94 475.5 61 310.5c0-12.2-30.4-7.4-28.9 3.3 24 173.4 246 256.9 381.6 121.3 6.9-7.8-12.6-28.4-20.7-20.4zM213.6 306.6c0 4 4.3 7.3 5.5 8.5 3 3 6.1 4.4 8.5 4.4 3.8 0 2.6.2 22.3-19.5 19.6 19.3 19.1 19.5 22.3 19.5 5.4 0 18.5-10.4 10.7-18.2L265.6 284l18.2-18.2c6.3-6.8-10.1-21.8-16.2-15.7L249.7 268c-18.6-18.8-18.4-19.5-21.5-19.5-5 0-18 11.7-12.4 17.3L234 284c-18.1 17.9-20.4 19.2-20.4 22.6z"}}]})(props);
};
소스코드를 보면GenIcon어떻게 작동하는지 좀 더 자세히 알 수 있습니다.
import * as React from 'react';
import { IconContext, DefaultContext } from './iconContext';
export interface IconTree {
tag: string;
attr: {[key: string]: string};
child: IconTree[];
}
function Tree2Element(tree: IconTree[]): React.ReactElement<{}>[] {
return tree && tree.map((node, i) => React.createElement(node.tag, {key: i, ...node.attr}, Tree2Element(node.child)));
}
export function GenIcon(data: IconTree) {
return (props: IconBaseProps) => (
<IconBase attr={{...data.attr}} {...props}>
{Tree2Element(data.child)}
</IconBase>
);
}
export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
children?: React.ReactNode;
size?: string | number;
color?: string;
title?: string;
}
export type IconType = (props: IconBaseProps) => JSX.Element;
export function IconBase(props:IconBaseProps & { attr?: {} }): JSX.Element {
const elem = (conf: IconContext) => {
const {attr, size, title, ...svgProps} = props;
const computedSize = size || conf.size || "1em";
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
return (
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
{...conf.attr}
{...attr}
{...svgProps}
className={className}
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
height={computedSize}
width={computedSize}
xmlns="http://www.w3.org/2000/svg"
>
{title && <title>{title}</title>}
{props.children}
</svg>
)
};
return IconContext !== undefined
? <IconContext.Consumer>{(conf: IconContext) => elem(conf)}</IconContext.Consumer>
: elem(DefaultContext);
}
so,는,GenIcon는 IconTree 에는, IconTree 의 인터페이스가 포함되어 있습니다.tag,attr ★★★★★★★★★★★★★★★★★」child we. 위의 하고 있는 알 수 .위의 생성된 코드로 동작하고 있는 것을 알 수 있습니다. GenIcon함수 자체를 반환합니다. 이 합니다.IconBaseProps인터페이스입니다.IconBaseProps가 확장되다React.SVGAttributes및 을 포함합니다.그런 다음 소품으로 전달됩니다.IconBase컴포넌트:
export function GenIcon(data: IconTree) {
return (props: IconBaseProps) => (
<IconBase attr={{...data.attr}} {...props}>
{Tree2Element(data.child)}
</IconBase>
);
}
어떻게 하는지 알기 위해서IconBase에 관해서 실제로 기능하고 있다IconContext그 반환문을 확인해 봅시다.
return IconContext !== undefined
? <IconContext.Consumer>{(conf: IconContext) => elem(conf)}</IconContext.Consumer>
: elem(DefaultContext);
여기, 우리는 그것을 볼 수 있다.IconBase라고 하는 함수를 호출합니다.elem(본체 내부에서 정의)IconBase)를 참조해 주세요.그렇게,IconBase를 사용합니다.IconContext정의되어 있는 경우 반환된 요소를 로 감습니다.IconContext.Consumer및 호출elem와 함께IconContext하지만 만약IconContext이 범위에 정의되어 있지 않습니다.IconBase를 사용합니다.DefaultContext대신.
이 동작의 구조를 이해하려면 , 다음의 정보를 참조할 필요가 있습니다.elem내부에 정의되어 있는 기능IconBase다음은 전체 소스입니다.
const elem = (conf: IconContext) => {
const {attr, size, title, ...svgProps} = props;
const computedSize = size || conf.size || "1em";
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
return (
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
{...conf.attr}
{...attr}
{...svgProps}
className={className}
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
height={computedSize}
width={computedSize}
xmlns="http://www.w3.org/2000/svg"
>
{title && <title>{title}</title>}
{props.children}
</svg>
)
};
className 관련 코드를 보면 className을 컨텍스트 및/또는 소품에 직접 추가할 수 있음을 알 수 있습니다.<FaFacebook className="bg-blue" />그리고 그것들은 실제로 조합되어 반환된 것에 적용됩니다.svg
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
또한 콘텍스트 또는 소품 중 하나에 정의된 스타일이 결합되어 svg에 적용됩니다.
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
여기서 한 가지 주의할 점은 모든 스타일과 클래스가 반환된 항목에 직접 적용된다는 것입니다.svg요소.따라서 당신의 경우 테두리 반지름과 배경색을 형성하기 위한 래핑 요소가 필요할 수 있으며 색상과 크기에 대한 관련 스타일을 svg에 직접 적용해야 합니다.
"color" 속성을 추가하기만 하면
다음과 같은 경우:
<Icon color="blue" />
import {IconContext} from "react-icons";
class App extends component {
return (
<div>
<IconContext.Provider value={{ className="myReact-icons"}}>
<FaBeer />
</IconContext.Provider>
</div>
);
}
css example below
.myreact-icons { color: red;
height: 40px;
}
아이콘 내의 을 svg 아이콘으로 선택할 수 ..icon > * css를 fill.
```
.icon > * {
fill: #B3B3B3;
}
.icon > *:hover {
fill: #747474;
}
```아이콘에 색상 특성을 추가하는 것만으로 할 수 있습니다.크기 등 다른 특성도 마찬가지입니다.
<BiXCircle size={40} color="red" />
<HiOutlineInformationCircle
size= {40}
color="#777C92"
className = "m-1 cursor-pointer hover: stroke-[#E5765D]"
/>
그로밋 아이콘의 색상 변경은 적용되지 않습니다.클래스를 전달하고 css로 타겟팅하거나 <IconExample color={'blue'} /> 내에서 직접 타겟팅하여 다른 사람과 시도 할 수 있습니다.
function blackReactIcons () {
return(
<div>
<FaTwitter fill='#000' />
<FaLinkedinIn fill='#000' />
<FaGithub fill='#000' />
</div>
);
}
It is so easy just capsule your **icon** in **span tag**
<div className="social-icons">
<span>
<FaGithub/>
</span>
</div>
then style it using **CSS**
.social-icons span{
margin: 10px;
font-size: 20px;
color: var(--grey);
}
.social-icons span:hover{
color:black
}
다른 속성과 함께 개체로 내보내고 해당 속성을 통해 매핑할 수 있습니다.
import { FaInstagram, FaTwitter } from 'react-icons/fa';
export const socialIcons = [
{
icon: <FaInstagram
style={{ height: '30px', width: '30px' }}
/>,
title: 'Instagram',
link: '',
color: '#C13584',
isOpen: false,
id: 'instagram',
},
{
icon: <FaTwitter
style={{ height: '30px', width: '30px' }}/>,
title: 'Twitter',
link: '',
color: '#00acee',
isOpen: false,
id: 'twitter',
},
];
import { socialIcons } from '../';
// ...
<div>
{socialIcons.map((social) => (
<div>
<a href={social.link}>
<button style={{ color: social.color }}
id={social.id}>
{social.icon}
</button>
</a>
</div>
))}
</div>
스타일.scss 또는 css
.iconFaFacebook {
color: blue;
font-size: 2.5rem;
}<FaFacebook className={styles.iconFaFacebook} />언급URL : https://stackoverflow.com/questions/56636280/how-to-style-react-icons
'programing' 카테고리의 다른 글
| Express 및 ejs <%=를 사용하여 JSON 렌더링 (0) | 2023.03.10 |
|---|---|
| JObject 계층에서 이름으로 특정 JToken 검색 (0) | 2023.03.10 |
| AngularJS 태그 링크가 작동하지 않음 (0) | 2023.03.10 |
| ASMX, ASPX 또는 ASHX에 대한 .NET AJAX 콜 (0) | 2023.03.05 |
| Angular에서 ng-options를 사용하여 선택을 필터링하려면 어떻게 해야 합니까? (0) | 2023.03.05 |