반응 시 svg 이미지에 색상을 추가하는 방법

반응 시 svg 이미지에 색상을 추가하는 방법

아이콘 목록이 있습니다.아이콘 색상을 흰색으로 변경하고 싶습니다.기본적으로 아이콘은 검은색입니다.여러분, 추천할 만한 거 있어요?

저는 평소에'fill: white'근데 리액트에서 하니까...안 돼!

import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';


<ul>
   <li>
    <a href="/" className="sidebar__link">
     <img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
   <li>
    <a href="/" className="sidebar__link">
     <img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
</ul>



.sidebar__icon {
 fill: #FFFFF;
 width: 3.2rem;
 height: 3.2rem;
}

각 아이콘에 대해 React 구성 요소를 생성할 필요가 없도록 이 방법을 사용합니다.문서에 따르면 SVG 파일을 리액트컴포넌트로 Import할 수 있습니다.

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

채우기 속성을 변경하려면 SVG를 설정해야 합니다.fill에 대한 의 가치current다음과 같이 사용할 수 있습니다.

<svg fill="current" stroke="current" ....> ... </svg>

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill='red' stroke='green'/>
  </div>
);

SVG를 컴포넌트로 사용하면 SVG의 모든 장점을 이용할 수 있습니다.

const MenuIcon = (props) =>(
    <svg xmlns="http://www.w3.org/2000/svg" fill={props.fill} className={props.class}></svg>
)

그리고 당신의 렌더링에는

<li>
   <a href="/" className="sidebar__link">
      <MenuIcon fill="white"/>
    </a>
</li>

g 또는 path에 접속하여 svg의 css를 변경할 수 있습니다.create-react-app 버전 2.0 이후

import React from 'react'
import {ReactComponent as Icon} from './home.svg';

export const Home = () => {

    return (
        <div className='home'>
            <Icon className='home__icon'/>
        </div>
    );
};

.home__icon g {
 fill: #FFFFF;
}
.home__icon path {
 stroke: #e5e5e5;
 stroke-width: 10px;
}

나는 이 문제에 대한 흥미로운 해결책을 찾았다.모든 경우에 효과가 있을지는 모르겠지만...좋아요, 저는 다음과 같은 svg를 가지고 있습니다.

import LockIcon from "../assets/lock.svg"

다음으로 다음과 같이 렌더링합니다.

<LockIcon color={theme.colors.text.primary} />

그 후 lock.svg에 추가합니다.fill="currentColor"svg 태그로 지정합니다.

이것이 여러분들에게 도움이 될 수 있기를 바랍니다.

svg의 스타일을 변경하지 않고 svg 자체의 코드를 변경하지 않고 svg의 색상을 변경하고자 하는 경우.

svg의 색상을 이미지로 변경할 수도 있습니다.

이것은 css의 필터 속성을 적용함으로써 수행할 수 있습니다.색상을 css 필터로 변경합니다.

푸른색

• 16진수 코드 = #0000ff
• 필터링할 파란색:invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%);

코드

<img src="path/to/svg" 
  style={{filter: "invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%)"}} 
/>

언급

제 경우 svg 파일의 다음 부분을 삭제해야 동작합니다.

<style type="text/css">
    .st0{fill:#8AC6F4;}
</style>

그러면 이것은 효과가 있다.

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

리액트 기준16.13.1SVG를 컴포넌트로 직접 사용하여 패스할 수 있습니다.fill소품 색상을 변경합니다.다음의 예를 봐 주세요.

home.svg

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 12 2.0996094 L 1 12 L 4 12 L 4 21 L 11 21 L 11 15 L 13 15 L 13 21 L 20 21 L 20 12 L 23 12 L 12 2.0996094 z M 12 4.7910156 L 18 10.191406 L 18 11 L 18 19 L 15 19 L 15 13 L 9 13 L 9 19 L 6 19 L 6 10.191406 L 12 4.7910156 z"/></svg>

ShowIcon/index.js

import React from 'react';

import HomeIcon from './home.svg';

const ShowIcon = props => {
    return (
        <HomeIcon fill='#ccc' />
    )
}

export default ShowIcon;

그러나 여러 아이콘으로 테스트한 결과, 모든 아이콘에서 동작하지 않는 것을 알 수 있었습니다.그러니까 사용하기 전에 시험해 보세요.

.svg 파일 내 경로 태그의 채우기 속성이 "없음"으로 설정되어 있는지 확인하십시오.그렇지 않으면 작동하지 않습니다.

<Icon fill="white"/>

나도 같은 문제에 직면해서 대부분의 제안을 시도했지만 소용이 없었다.

아주 간단한 방법으로 해결했는데...SVG 이미지의 컴포넌트를 생성할 필요가 없습니다.

원하는 색상만 입력합니다.<path fill='#9d8189' ...></path>.tvg 파일로

다음과 같은 접근방식을 사용합니다.

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill='red' stroke='green'/>
  </div>
);

SVG에서 색상을 전류로 설정할 필요는 없지만 동작합니다.

<svg fill="current" stroke="current" ....> ... </svg>

SVG를 사용할 때마다 리액트 컴포넌트에서 설정할 필요가 없도록 몇 가지 기본 색상을 유지할 수 있습니다.단, 필요할 때만 설정할 수 있습니다.

<svg fill="#ffffff" stroke="#ffffff" ....> ... </svg>

SVG와 같은 도구를 사용하여 변환기를 폰트하는 것이 좋습니다.icomoon은 제가 좋아하는 것입니다.SVG 아이콘을 Import하기 위한 커스텀 폰트 라이브러리를 만듭니다.

소품

• 아이콘의 CSS를 사용하여 색상, 글꼴 크기 등을 변경하다
• 하나의 Import로 전체 프로젝트에서 사용
• 무료 아이콘/아이콘 번들을 제공하고 있습니다.

단점

• 초기학습곡선
• SVG 아이콘을 만들 때 치수, 윤곽 등을 적절하게 따릅니다.
• 다색 아이콘은 어렵다

언급URL : https://stackoverflow.com/questions/54519654/how-do-i-add-color-to-my-svg-image-in-react