Vue는 컬러 SVG 파일을 동적으로 채웁니다.

Question

VueJS 3를 사용하여 Twitter 복제 앱을 만들고 있습니다.

트위터 로고를 .svg 파일로 저장했는데 <img /> 标记一起使用。当我为 <svg> 标记提供 fill="#fff" 속성과 함께 사용하면 색상도 변경할 수 있습니다. 하지만 이 .svg 파일을 여러 위치에서 다양한 색상으로 사용하고 싶습니다.

그래서 svg의 색상을 <img /> 标签提供类 fill-white、bg-white 和 text-white 제공하여 동적으로 변경하려고 시도했지만 작동하지 않습니다.

내 현재 .svg 파일 - 흰색

으아악

사진 태그

으아악

.svg 파일에서 이 작업을 시도했습니다

으아악

이 svg의 색상을 편집 가능하게 만들어야 한다는 것을 알고 있습니다. 하지만 이 작업을 수행하는 방법을 찾을 수 없습니다.

Answer 1

으아악 으아악

Answer 2

svg 파일로 구성 요소를 만들고 패딩을 소품에 바인딩할 수 있습니다.

으아아아 으아아아