Svg 스프라이트를 아이콘으로 사용하는 방법

SVG 스프라이트는 SVG 이미지 모음을 포함하는 XML 파일입니다. 이미지는 웹사이트나 모바일 앱에서 아이콘이나 일러스트레이션으로 사용할 수 있습니다. 각 이미지는 별도의 요소에 포함되며 아이콘을 오프라인에서 사용할 수 있도록 XML 파일을 캐시할 수 있습니다. SVG 스프라이트를 사용하려면 XML 파일을 문서에 로드해야 합니다. 그런 다음 요소의 ID를 참조하여 이미지를 사용할 수 있습니다. 예를 들어 고양이 이미지를 사용하려면 XML 파일이 문서에 로드되고 이미지는 해당 ID로 참조됩니다. 그런 다음 고양이 이미지는 ID를 참조하여 문서의 어느 곳에서나 사용할 수 있습니다. CSS로 스타일을 지정하고 'x' 및 'y' 속성으로 위치와 크기를 제어할 수 있습니다. 이러한 파일이 로고, 다이어그램 및 아이콘에 특히 유용한 몇 가지 이유가 있습니다. 일반적으로 기호와 이미지는 .svg 파일을 통해 별도의 이미지로 정의됩니다. 또 다른 옵션은 단일 sva 파일을 여러 sva 이미지에 추가하는 것입니다. 픽셀 위치를 계산하고 CSS 코드를 생성하는 데 사용할 수 있는 여러 도구가 있습니다. use 요소가 있는 페이지에서 단일 요소를 사용할 수 있는 횟수에는 제한이 없습니다. IE11 이하의 구형 브라우저에서는 외부 이미지가 표시되지 않습니다. HTML 마크업 오류를 방지하기 위한 최선의 대안은 전체 SVG를 HTML 마크업에 삽입하고 대상을 사용하여 각 스프라이트를 참조하는 것입니다. 각 개별 문자에는 스프라이트 클래스가 할당되며 포함된 CSS는 기본적으로 없음을 표시하도록 지시합니다. 확장 가능한 그래픽에는 손으로 만들거나 프로그램을 통해 만드는 두 가지 방법이 있습니다. 후자의 경우 한 줄의 코드가 필요합니다. 벡터 이미지 프로그램을 사용할 때 가상 드로잉 보드에 아이콘을 그리고 다양한 모양, 색상 및 경로 조작을 사용하여 아이콘을 조작합니다. 이 경우에는 *svg 태그를 사용하여 이미지를 HTML 문서에 직접 작성할 수 있습니다. 선호하는 IDE인 VS 코드가 있거나 HTML을 사용하는 경우 SVG 이미지를 HTML 요소로 사용하여 문서에 포함할 수 있습니다. 모든 단계를 올바르게 수행했다면 아래와 같은 페이지를 만들 수 있습니다.확장 가능한 이미지가 포함된 벡터 그래픽 파일을 SVG 파일이라고 합니다.이미지 형식과 관련하여 다양한 컨텍스트를 사용하여 SVG 이미지를 만듭니다. *img 또는 *svg와 같은 HTML 요소는 SVG 이미지를 사용할 때 브라우저에서 지원됩니다.Svg 파일을 아이콘으로 사용할 수 있습니까?제공: svgrepoScalable Vector Graphics(SVG)의 주요 장점은 웹 사이트에서 아이콘으로 사용할 수 있다는 것입니다. 벡터 그래픽이기 때문입니다. 벡터 그래픽은 모든 크기로 확장할 수 있으며 동일한 고품질을 갖습니다. 이러한 파일은 작고 압축률이 좋기 때문에 결과적으로 웹 사이트 로드 속도가 느려지지 않습니다.Scalable Vector Graphics(SVG)는 벡터 이미지 형식을 사용할 때 XML(eXtensible Markup Language) 구문을 사용하여 그릴 수 있습니다. 고정 크기 픽셀 이미지와 달리 SVG는 브라우저에서 직접 보고 렌더링할 수 있는 XML 코드 블록입니다. 단어보다 훨씬 작을 수 있는 이미지는 훨씬 더 간결하며 작업과 정보를 훨씬 더 빠르게 나타낼 수 있습니다. SVG 이미지 파일 형식을 웹에서 사용할 수 있게 된 것은 Tamagotchis, iMac 및 Palm Pilots가 우리 집에 들어오기 시작한 것과 거의 같은 시기였습니다. 일반적으로 대부분의 웹 브라우저는 SVG 형식을 지원하지 않으며 인식하지 못했습니다. 그러나 2017년까지 웹 브라우저는 지원 부족으로 인해 SVG 렌더링에 어려움을 겪었습니다. 아이콘 웹폰트나 벡터 기반 글꼴을 사용하면 크기 조정에 문제가 없습니다. 미리 만들어진 아이콘 세트는 아이콘을 디자인할 때 더 제한된 범위의 디자인 옵션을 제공합니다. 좀 더 다재다능한 것을 만들고 싶다면 svg 파일을 선택하세요. SVG 아이콘은 손 도구 또는 소프트웨어 프로그램으로 만들 수 있습니다. 벡터 이미지 프로그램을 사용하여 가상의 드로잉 보드에 아이콘을 그릴 수 있습니다. 그런 다음 완료된 .svg 파일을 내보낼 수 있습니다. 이 Evernote 목록에서도 무료 SVG 아이콘을 얻을 수 있습니다. 도형의 크기는 너비와 높이로 결정되는 반면 위치는 x와 y로 결정됩니다. 또한 클래스 이름과 스타일을 포함하는 별도의 스타일시트를 만들어 각 요소의 스타일을 정의할 수 있습니다. Ycode 노코드 빌더의 도움으로 이러한 아이콘의 색상을 변경하고 배경색을 변경할 수 있습니다. 다재다능하고 확장 가능하며 사용하기 쉬운 이미지 형식이 필요한 경우 svega 사용을 고려해야 합니다. 애니메이션 및 투명성 기능으로 인해 개인 및 상업 프로젝트 모두에 이상적입니다. 대부분의 사람들이 보다 일반적인 형식 대신 SVG를 사용하기 때문에 이전 장치나 브라우저에서는 지원되지 않을 수 있습니다.Svg 스프라이트는 어떻게 사용합니까?SVG 스프라이트는 사이트에 대한 HTTP 요청 수를 줄이는 좋은 방법입니다. 여러 이미지가 포함된 단일 파일이며 각 이미지는 요소를 사용하여 액세스할 수 있습니다. 예를 들어 3개의 이미지가 포함된 "sprite.svg"라는 파일이 있는 경우 및 요소를 사용하여 각 이미지에 액세스할 수 있습니다. SVG-sprite는 다양한 SVG를 최저 수준의 스프라이트로 굽는 Node.js 모듈입니다. . 이 패키지에는 오래된 CSS 또는 주요 전처리기 형식(Sass, Less 및 Stylus) 중 하나로 스타일시트를 만들기 위한 Mustache 템플릿 세트가 포함되어 있습니다. 표준 API 사용을 선호하는 경우 Grunt 또는 Gulp 래퍼를 사용하여 작업을 단순화할 수 있습니다. 기본적으로 Sprite에는 모드, 그룹 및 개인의 세 가지 유형이 있습니다. 동시에 다른 장소에서 출력 모드를 끌 수 있습니다. 전처리기 형식(Sass, LESS, Stylus 등) 중 하나로 CSS Sprite 및 스타일시트를 생성할 때 특별한 고려 사항을 숙지해야 합니다. >제목> 및 >설명>과 같은 요소가 포함된 YAML 파일을 SVG에 저장합니다. 명령줄 버전에는 완전한 명령줄 도구가 포함되어 있어 다양한 출력 형식으로 작업할 수 있습니다. 모든 디자인의 필수 부분이며 브랜드나 제품을 나타내는 데 사용할 수 있습니다. 회사의 아이콘은 특히 스마트폰과 태블릿의 경우 인식 가능하고 확장 가능해야 합니다. SVG를 사용하여 아이콘을 만들려면 먼저 아이콘 클래스를 나타내는 *svg> 요소를 포함시킨 다음 아이콘 클래스를 나타내는 *use** 요소를 포함합니다. svg 파일에 href 속성과 octothorpe(화살표)를 포함합니다. 마지막으로 아이콘 이름입니다. 다음 코드를 사용하여 블로그 게시물 제목의 예를 만들 수 있습니다. “CSS와 SVG를 사용하여 간단한 SVG 아이콘을 만드는 방법” svg class=”icon-title”> br>br> *xlink:href=#icon-post -title #iconposttitle 다음 단계를 따르면 간단한 SVG 아이콘을 쉽게 만들 수 있습니다. */octothorpe> Svg 아이콘을 사용해야 하는 이유 SVG 스프라이트는 어떻게 사용합니까? 독립 실행형 이미지에 사용하거나 HTML에 포함할 수 있는 것 외에도 SVG를 사용할 수 있습니다. Internet Explorer 9 이상을 포함한 모든 주요 브라우저에서 작동합니다. 왜 sva 아이콘을 사용해야 합니까? 인라인 SVG 아이콘은 파일에 약간의 코딩을 추가하므로 괜찮다면 사용할 수 있습니다. SVG 아이콘은 일반 디스플레이와 레티나 디스플레이 모두에서 멋지게 보입니다. 이것이 중요한 경우 글꼴 아이콘이 아닌 인라인 SVG 아이콘을 사용하십시오. SVG 아이콘은 .NET 아이콘보다 선호됩니다. React에서 Sprite를 어떻게 사용합니까? '../letters'에서 반복 가져오기; '../reacts.'에서 반복 가져오기 LetterSvg 가져오기 svg; 시작하다 '. 문자를 scs라고 합니다. (글자, 색상, 크기) (svg className=svg-letter) 글자의 종류에 따라 채워주세요. 사용 href=*$*Letters*#letter-$letter=/svg); letterSvg.propTypes = 문자: React.Types.string, 색상: 반응. letterSvg.default.Props를 내보낼 때 문자(A) 색상:#f5f5f5f5', 크기: 20을 선택합니다. 내보내기 기본 letterSvg를 사용합니다. letter: 'A'Svg 아이콘을 어떻게 사용합니까?SVG 아이콘을 사용하려면 Adobe Illustrator, Inkscape 또는 Sketch와 같은 벡터 편집 프로그램이 필요합니다. 아이콘이 생성되면 SVG 파일로 저장할 수 있습니다. 웹사이트에서 아이콘을 사용하기 위해 SVG 파일을 HTML 코드에 삽입할 수 있습니다. 아이콘은 HTML 및 CSS에서 다양한 방식으로 찾을 수 있지만 Kaliop의 프런트 엔드 개발 팀에서 가장 일반적으로 사용됩니다. 둥근 모양을 염두에 두고 모양의 가장자리 사이에 약간의 거리를 두십시오. 낮은 화면에서 최상의 결과를 얻으려면 픽셀 피팅의 치수를 지정하기만 하면 됩니다(해상도가 적절한 범위로 설정된 경우). 디자인 도구로 생성된 이미지를 내보낼 때 약간의 마크업과 메타데이터가 있는 것이 일반적입니다. 또한 경로 데이터(d 속성)는 매우 정확할 수 있습니다. 이전과 이후에 코드에서 무엇이 제거되거나 단순화되었는지 확인하려면 SVGOMG와 같은 도구를 사용하십시오. 소스에 하드코딩된 채우기가 있는 경우 CSS 코드에서 해당 색상을 변경할 수 없으므로 단색 아이콘에 이 옵션이 없는지 확인하십시오.스프라이트를 수동으로 만드는 경우 별도의 폴더를 유지해야 합니다. 개별 SVG 아이콘을 포함합니다. 스타일을 지정할 필요가 없는 일러스트레이션은 단일 SVG 파일로 보관하고 <img href=url/to/illustration.svg> alt='>를 사용하여 페이지에 포함하십시오. 이미지에 애니메이션을 적용하는 경우 HTML 페이지에 전체 SVG 코드를 포함하는 것이 좋습니다. 일부 문서에서는 텍스트 레이블을 사용하여 아이콘 저장소의 각 SVG 파일에 레이블을 지정하도록 권장합니다. 일부 JavaScript(svg4everybody,svgxuse)로 폴리필하면 작동합니다. 또는 모든 페이지의 HTML 코드에 스프라이트를 포함할 수 있습니다. 각 방법에는 많은 장점과 단점이 있습니다. Sprite를 만드는 두 가지 방법을 결합하는 것이 가장 효과적인 방법입니다. SVG 스타일 속성의 상당 부분은 부모로부터 상속됩니다. stroke-width 속성을 특정 길이로 설정할 필요는 없지만 아이콘의 로컬 좌표를 기준으로 특정 값으로 설정해야 합니다. 경로가 뷰포트의 한계에 도달하면 스트로크의 절반이 잘립니다. 간단한 기술을 사용하여 두 가지 다른 채우기 값(일명 두 가지 색상)으로 아이콘을 만들 수 있습니다. 아이콘이 커서 페이지에 적절한 HTML 구조가 있는지 확인하기 어려울 것입니다. 이것은 페이지의 헤드에 추가할 수 있습니다. 너무 달콤하고 짧습니다. 또 다른 접근 방식은 SVG 요소에서 너비 및 높이 속성을 사용하는 것입니다. 하지만 CSS에서 이 아이콘의 크기를 조정해야 한다면 조금 더 어려울 수 있습니다. 사각형 또는 공유 아이콘을 사용하는 경우 아이콘 너비의 대략적인 백분율을 나타내기 때문에 백분율 값을 사용할 수 있습니다. 그래디언트 채우기를 채우려면 sva 그래디언트를 사용해야 합니다. CSS linear-gradient(…)는 CSS 규칙을 위반하기 때문에 SVG 채우기 속성에 사용할 수 없습니다. SVG 파일을 모바일 장치에서 보는 경우 “이미지를 다른 이름으로 저장 .” 장치의 갤러리에 SVG 파일을 저장할 때 나중에 유용할 것입니다. 자신만의 맞춤형 일러스트레이션을 사용하기로 선택하면 바로 시작할 수 있습니다. Svg가 아이콘에 가장 적합한 옵션인 이유 SVG는 품질 저하 없이 모든 크기로 확장할 수 있기 때문에 아이콘에 탁월한 선택입니다. 또한 SVG를 사용하면 아이콘 글꼴에서만 볼 수 있는 기능인 아이콘의 개별 비트를 변경하거나 색상을 지정하거나 애니메이션을 적용할 수 있습니다. 픽셀 및 투명도로 작업하는 경우 PNG 파일이 SVG 파일보다 선호됩니다.아이콘에 Svg 또는 Png를 사용해야 합니까?벡터 이미지이기 때문에 모든 크기로 확장할 수 있고 우수한 이미지 품질을 제공합니다. 반면에 PNG는 많은 브라우저에서 지원되지 않습니다. Internet Explorer 8 이상을 사용해야 하는 경우 PNG를 사용하고 그렇지 않은 경우 SVG를 사용하는 것이 가장 좋습니다. 스프라이트, 이미지 또는 인라인 SVG 사용과 같이 PNG보다 SVG를 사용하면 몇 가지 이점이 있습니다. PNG 파일은 레티나 디스플레이의 경우 두 배로 커질 수 있으며 성능 저하 없이(레거시 브라우저 필요 없음) 파일 크기가 훨씬 작아집니다(Javascript 또는 폴리필 필요 없음). 환상적인 디자인 기능에도 불구하고 PNG는 전송, 대역폭 및 도달 범위 측면에서 최고의 디자인 도구입니다. 대부분의 사람들은 단순히 모양이나 디자인을 보여주고 변경해야 하는 경우 SVG를 사용할 이유가 별로 없다고 생각합니다. 둘 다 강점을 보여주고 사례를 사용할 수 있지만 PNG는 훨씬 뒤떨어져 있습니다. 이미지 데이터가 아닌 벡터 데이터를 처리할 때 브라우저에 더 많은 노력이 필요합니다. Chrome과 같은 최신 브라우저에는 CMS와 유사한 페이지가 수백 개(실질적으로 3-500개)의 svg 아이콘이 있어 말 그대로 열자마자 5~7초 동안 브라우저를 정지시킵니다. 페이지의 SVG 수로 인한 브라우저의 로드. 이 경우 SVGS를 웹 글꼴로 변환해야 합니다. 두 번째 옵션으로 일반 이전 PNG로 되돌립니다. SVG 아이콘은 PNG 아이콘과 동일한 품질이 없습니다. 실제 사진을 다루고 싶지 않다면 언제든지 Svg 대신 .html을 사용할 수 있습니다. 무료 SVG 아이콘은 이제 최신 브라우저에서 사용할 수 있으며 서버에 저장하고 브라우저의 서버측 코드를 통해 클라이언트에 로드할 수 있습니다. CSS 3D 변환을 지원하지 않아 버튼과 결합할 때 문제가 발생할 수 있고 CSS 3D 변환을 지원하지 않을 수도 있습니다. SVG 아이콘을 품질 저하 없이 축소하거나 확대할 수도 있습니다. 아이콘 글꼴은 일반적으로 크기가 조정될 때 눈에 잘 띄지 않지만 일반적으로 덜 효과적입니다. 마지막으로 sVG 아이콘은 사용자와 상호 작용하는 버튼, 탭 및 기타 요소로 변환될 수 있습니다. 반면에 아이콘 글꼴은 사용자 인터페이스 요소로 자주 사용되지 않습니다. 벡터 그래픽 디자인이 대중화되면서 점점 더 많은 사람들이 아이콘과 그래픽을 위해 sva를 사용하고 있습니다. 그러나 SVG 이미지는 JPEG 이미지보다 크기가 크지만 더 유연하고 편집하기 쉽습니다. 또한 품질 저하 없이 크기를 늘리거나 줄일 수 있으며 버튼, 탭 및 기타 사용자 인터페이스 요소를 만드는 데 사용할 수 있습니다. 보다 유연하고 확장 가능한 방식으로 그래픽을 생성하려면 svega.Svg Vs를 사용하십시오. 로고 및 아이콘용 Png 더 나은 결과를 얻으려면 sva와 같은 벡터 파일을 사용하여 로고 또는 아이콘을 만드십시오. 섬세한 디테일과 텍스처에 사용할 수 있는 다양한 PNG가 있지만 SVG는 로고, 아이콘 및 기타 평면 그래픽에 더 일반적으로 사용됩니다. 이전 브라우저는 SVG를 지원하지 않을 수 있으므로 대신 PNG를 사용하는 것이 좋습니다. Html에서 Svg 스프라이트를 사용하는 방법SVG 스프라이트는 페이지에 대한 HTTP 요청 수를 줄이는 좋은 방법입니다. 또한 페이지의 파일 크기를 줄이는 데에도 좋습니다. 사용 방법은 다음과 같습니다. 먼저 SVG 파일용 폴더를 만듭니다. 다음으로 해당 폴더에 "sprite.svg"라는 파일을 만듭니다. 이 파일에는 모든 SVG 아이콘이 포함됩니다. 다음으로 HTML 파일을 열고 섹션에 다음 코드를 추가합니다. … … “/path/to/sprite.svg”를 스프라이트 파일의 경로로 바꿉니다. "icon-name"을 사용하려는 아이콘 이름으로 바꿉니다. 이제 브라우저에서 HTML 파일을 볼 때 지정한 아이콘이 표시되어야 합니다. XML 문서이기 때문에 애플리케이션/svg의 콘텐츠 유형이라는 것이 중요합니다. SVG 파일의 콘텐츠 유형이 제대로 정의되지 않았기 때문에 브라우저에서 해석하지 못할 수 있습니다. img src=”image.svg”> 또는 CSS background-image와 같은 SVG를 사용하고 있고 파일이 제대로 연결되어 있고 모든 항목이 올바르게 표시되지만 브라우저에 표시되지 않는 경우 다음이 원인일 수 있습니다. 귀하의 서버는 HTML 페이지가 포함된 파일을 SVG 요소와 함께 직접 포함할 수 있습니다. SVG 파일이 적절한 콘텐츠 유형과 함께 제공되는 경우 브라우저가 SVG 파일을 해석할 수 있어야 합니다.Svg 스프라이트: 그래픽에 애니메이션을 적용하는 가장 좋은 방법HTML 포함은 벡터 그래픽 편집기 없이도 사용자 정의 그래픽을 만드는 간단한 방법을 제공할 수 있습니다. . SVG 외에도 스프라이트를 사용하여 애니메이션 그래픽을 쉽게 생성할 수 있습니다.Svg 스프라이트 예제SVG 스프라이트의 한 가지 예는 소셜 미디어 아이콘 팩을 만드는 것입니다. 개별 아이콘은 별도의 SVG 파일로 저장되고 모든 개별 아이콘을 참조하는 마스터 파일이 생성됩니다. 마스터 파일을 브라우저에서 열면 개별 아이콘이 단일 이미지로 표시됩니다. 아이콘 글꼴을 좋아하지만 몇 가지 단점이 있습니다. gulp를 사용하여 Sprite를 만드는 것은 간단합니다. 플러그인을 사이트에 연결합니다(글로벌 설치). gulpfile:: 플러그인은 여기에서 찾을 수 있습니다. 태그 기호가 포함된 ansvg 파일을 설정합니다. 아이콘이 필요한 곳을 지적할 때 최소화해야 합니다. 자산 디렉터리는 단순히 자산을 보다 편리한 위치에 배치하는 방법입니다. 아이콘에서 스타일, 채우기 및 획 속성을 제거하면 CSS를 통해 지정된 스타일을 볼 수 없습니다. 작업을 완료하고 실행하십시오. 페이지를 첨부해야 합니다. Sprite를 통해 아이콘을 연결할 수 있는 작업 시스템이 있지만 아직 한 단계 더 수행해야 합니다. Illustrator에서 아이콘을 내보내는 경우 먼저 픽셀 격자를 활성화한 다음 아이콘의 크기와 위치를 조정해야 합니다. 아이콘도 스트로크에서 변환해야 합니다. 이것이 iconmoon 설명서에서 수행해야 할 작업입니다. 스프라이트를 사용하여 파일 크기 줄이기 및 속도 증가 스프라이트를 만들 때 기본적으로 응용 프로그램에서 여러 번 사용할 단일 이미지를 만드는 것입니다. 따라서 Sprite를 사용하여 파일 크기를 줄이고 애플리케이션 속도를 높이는 것이 좋습니다. React 애플리케이션에서 Sprite를 사용하려면 먼저 Sprite를 프로젝트로 가져와야 합니다. 프로젝트의 package.js 파일에 다음 줄을 추가하면 됩니다. 행동하려면 https://www.npmjs.com/package/react-svg로 이동하세요. 그런 다음 LetterSvg 클래스의 인스턴스를 만들어야 합니다. 이 수업에서는 문자, 색상 및 문자 크기에 대해 논의합니다. 귀하의 인수는 스프라이트로 사용하려는 문자의 이름입니다. 색상 인수는 스프라이트가 무엇인지 알려줍니다. 크기 인수는 문자의 픽셀로 정의됩니다. SVG 스프라이트가 생성되면 LetterSvg 클래스를 사용하여 SVG 스프라이트를 생성합니다. useHref() 메서드를 사용하면 그렇게 할 수 있습니다. Sprite 파일의 URL은 이 메소드에 지정되어야 합니다. 스프라이트의 색상과 크기를 결정하려면 fill() 및 width() 메서드를 사용합니다. 스프라이트 설정을 완료한 후 addChild() 메서드를 사용하여 스프라이트를 React 애플리케이션에 추가할 수 있습니다. 이 메서드에 추가할 요소의 이름이 필요하며 요소의 자식 요소여야 합니다. 마지막으로 animate() 메서드를 사용하여 Sprite에 애니메이션을 적용할 수 있습니다. 이 메서드의 매개변수는 기간과 완화입니다. 애니메이션이 끝나는 데 걸리는 시간은 애니메이션의 지속 시간에 따라 결정됩니다. 애니메이션 유형은 easing 매개변수로 지정됩니다. 애니메이션에는 default, cubic-bezier 및 animate의 세 가지 옵션이 있습니다. 이 경우 새로운 스프라이트를 React 애플리케이션에 추가하여 추가 덕분에 더 동적으로 만들 수 있습니다. 스프라이트를 사용하면 애플리케이션 사용자 인터페이스의 개발 프로세스 속도를 높일 수 있습니다.Svg-sprite-loaderSVG 스프라이트를 생성하는 방법을 찾고 있다면 svg-sprite-loader를 확인하는 것이 좋습니다. 이 라이브러리를 사용하면 SVG 스프라이트를 쉽게 만들고 유지 관리할 수 있으며 비교적 사용하기도 쉽습니다. 이제 Webpack 2.0에 대한 마이그레이션 가이드를 사용할 수 있습니다. v0 분기의 README에서 찾을 수 있습니다. 대상 웹팩의 구성 옵션은 기본적으로 결정됩니다. 사용자 정의 동작을 설정하려면 이 메소드를 사용하여 구현 모듈의 경로를 정의하십시오. SpriteFilename 옵션에서 [chunkname] 패턴을 사용하여 각 청크에 대해 여러 스프라이트를 생성할 수 있습니다. SVG 파일의 절대 경로를 반환하는 사용자 정의 함수는 포함되거나 제한되는 로더 규칙에 따라 다양한 스프라이트를 생성할 수 있습니다. React에서 스프라이트를 사용하려면 React에서 스프라이트를 사용하려면 먼저 구성 요소를 만들고 전달해야 합니다. 스프라이트 ID를 속성으로. 다음 코드는 스프라이트 ID를 사용하여 문자를 표시하는 간단한 LetterSVG 구성 요소를 만듭니다.