React,Vue 프로젝트 에서 SVG 를 사용 하 는 방법

9517 단어 ReactVueSVG
일부 현대 의 평면 화 된 디자인 사이트,특히 모 바 일 사이트 에는 간단 하고 뚜렷 한 작은 아이콘 이 많이 포함 되 어 있다.예 를 들 어 사이트 아이콘,사용자 의 기본 이미지,모 바 일 사이트 의 첫 페이지 밑 에 고정된 전환 표시 줄 등 이다.이런 작은 아이콘 들 은 보통 미 공 에 의 해 만들어 지고 요정 그림 에 올 려 놓 을 수 있 으 며 전단 에 다시 재단 하여 보 여줄 수 있다.

실제로 이런 간단 한 아이콘 들 은 미술 관 에 게 시 킬 필요 가 없다.전단 은 svg 를 통 해 코드 를 사용 하여 이 간단 한 아이콘 들 을 그 릴 수 있다.또한 이 아이콘 들 은 코드 로 묘 사 된 것 이기 때문에 이 아이콘 들 을 수정 하려 면 아이콘 의 색상,아이콘 의 모양,크기 등 을 바 꾸 려 면 몇 줄 의 코드 만 바 꾸 는 것 이다.아주 간단 해서 다시 일 할 필요 가 없다.
본 고 는 svg 를 어떻게 이용 하여 그림 을 그 리 는 지 논술 하 는 것 이 아니 라 svg 를 모 르 는 사람 은 이곳 에 가서 볼 수 있다.본 고 는 주로 사이트 에서 svg 를 어떻게 사용 하 는 지 설명 한다.
SVG 일반 웹 페이지 에서 의 사용
svg 는 XML 형식 으로 그림 을 정의 합 니 다.일반적인 HTML 태그 로 볼 수도 있 습 니 다.웹 페이지 에 장 착 되 어 어떤 효 과 를 나타 내 고 웹 페이지 에서 svg 를 사용 하 는 기본 예 는 다음 과 같 습 니 다.

<body>
  <svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:pink;stroke-width:1;stroke:rgb(0,0,0)"/>
  </svg></body>
효 과 는 다음 과 같 습 니 다:

일반 웹 페이지 에서 svg 를 사용 하 는 것 은 매우 간단 하 다.svg 아이콘 을 그 릴 수만 있다 면 웹 페이지 에서 의 표현 은 전혀 문제 가 되 지 않 는 다.
Vue 에서 Svg 사용 하기
일반 웹 페이지 에서 svg 를 사용 하 는 것 처럼 Vue 에서 사용 할 수 있 습 니 다.그러나 vue 를 선택 하여 구성 요소 화 개발 프로젝트 를 선택 한 이상 한 구성 요소 에 큰 부분 을 삽입 한 svg 는 좀 보기 좋 지 않 습 니 다.
svg 의 use 탭 을 이용 하여 홈 페이지 에 svg 아이콘 을 그 리 는 코드 를 직접 작성 하지 않 고 이 큰 코드 를 다른 파일 에 넣 고 use 를 참조 하여 아이콘 을 그 리 는 코드 를 사용 하면 됩 니 다.
예 를 들 어 svg 를 그 리 는 모든 코드 를 svg-icon.vue 파일 에 넣 고 모든 아이콘 의 그리 기 코드 는 symbol 탭 으로 분리 되 어 따로 이름 을 짓 고 오류 가 발생 하지 않도록 한 다음 이 파일 을 구성 요소 로 내 보 내 고 홈 페이지 에 이 구성 요 소 를 도입 한 다음 svg 아이콘 을 사용 해 야 하 는 곳 에서 use 탭 을 통 해 도입 합 니 다.
svg-draw.vue 코드 예 시 는 다음 과 같다.

<template>
 <svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  style={{position:'absolute',width:0,height:0}}>
  <defs>
   <symbol viewBox="0 0 26 31" id="location">
    <path xmlns="http://www.w3.org/2000/svg" d="M512.571517 65.907059c-204.736964 0-370.715183 165.979242-370.715183 370.724393 0 94.440929 35.320437 180.625824 93.462648 246.083651 1.572822 2.690272 3.50994 5.225001 5.817496 7.531534l240.297878 251.597225c1.279133 1.864464 2.736321 3.64297 4.393054 5.298679 2.111081 2.111081 4.418636 3.90596 6.856152 5.402033 14.458293 10.06524 34.491559 8.658194 47.393403-4.242627 3.26537-3.263323 5.78782-6.987135 7.582699-10.960633L783.610536 690.24766c1.867534-1.866511 3.489474-3.88447 4.876054-6.010901 58.951647-65.640999 94.819552-152.431691 94.819552-247.604284C883.305119 231.886301 717.325877 65.907059 512.571517 65.907059zM512.390391 588.611865c-82.734306 0-149.814074-67.087954-149.814074-149.842727 0-82.753749 67.079768-149.833517 149.814074-149.833517 82.772168 0 149.851936 67.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/>
   </symbol>
  </defs>
 </svg></template>
전체 vue 구성 요 소 는 큰 svg 를 내 보 냅 니 다.이 svg 에는 요정 그림 과 같은 작은 아이콘 이 많이 포함 되 어 있 습 니 다.모든 아이콘 은 symbol 로 구분 되 어 있 으 며 인용 하기 편리 하도록 따로 이름 을 지 었 습 니 다.
사용 예 는 다음 과 같다.

// index.vue
...<svg class="location-icon">
 <use xlink:href="#location" rel="external nofollow" ></use></svg>...
그리고 웹 페이지 에 대응 하 는 svg 아이콘 이 순조롭게 나타 나 는 것 을 볼 수 있 습 니 다.

그러나 문제 가 하나 더 있 습 니 다.만약 에 현재 사이트 에서 사용 해 야 할 svg 아이콘 이 많다 면 svg-icon.vue 라 는 파일 의 부피 가 점점 커 질 것 입 니 다.현재 웹 페이지 의 이름 은 그 중의 svg 아이콘 만 사용 해 야 합 니 다.그 결과 수백 개의 아이콘 의 svg 코드 를 모두 불 러 왔 습 니 다.분명 우호 적 이지 않 습 니 다.필요 에 따라 불 러 오 는 것 이 좋 습 니 다.현재 웹 페이지 에 필요 한 아이콘 을 불 러 옵 니 다.심지어 나타 나 지 않 을 수도 있 는 아이콘 도 나타 날 때 불 러 옵 니 다.기회 가 없 으 면 영원히 불 러 오지 않 습 니 다.
Github 에는 이런 플러그 인 이 많 습 니 다.저 는 사용 하기 좋 은 플러그 인 을 소개 합 니 다.vue-svg-icon,간단 하고 사용 하기 쉬 우 며 빠 른 시작 입 니 다.
우선,이 플러그 인 을 설치 하면 더 이상 말 하지 않 겠 습 니 다.설치 가 완료 되면 프로젝트 의 입구 파일 에 이 플러그 인 을 등록 하여 전역 호출 을 편리 하 게 합 니 다.

import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon)
그리고 루트 디 렉 터 리 의/src 디 렉 터 리 에 svg 디 렉 터 리 를 새로 만 듭 니 다.(현재 이 경 로 는 이 정도 입 니 다.다른 경로 와 디 렉 터 리 로 설정 할 수 없습니다.)그리고 이 디 렉 터 리 에 사용 하고 자 하 는 svg 아이콘 의 svg 파일 을 넣 으 면 됩 니 다.
예 를 들 어 위 챗 아이콘 의 svg 는 다음 과 같 습 니 다.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1502683891821" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2885" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
<defs>
<style type="text/css"></style>
</defs>
<path d="M282.6 363.8c-23.7 0-47-15.7-47-38.9 0-23.7 23.3-38.9 46.5-38.9 23.7 0 38.9 15.2 38.9 38.9 0.5 23.2-15.1 38.9-38.4 38.9zM500.4 286c23.7 0 38.9 15.2 38.9 38.9 0 23.3-15.2 38.9-38.9 38.9-23.3 0-47-15.7-47-38.9 0-23.7 23.7-38.9 47-38.9z m167.7 84.5c9.8 0 19.7 0.5 30 1.8-27.3-125.6-161.4-218.7-314.4-218.7C212.4 153.6 72 270.3 72 418.3c0 85.9 46.5 155.6 124.8 210.2l-31.3 93.9 109.1-54.6c38.9 7.6 70.2 15.7 109.1 15.7 9.4 0 19.2-0.5 29.1-1.3-6.3-20.6-9.8-42.9-9.8-65.3-0.1-136 116.6-246.4 265.1-246.4z" p-id="2886"></path><path d="M772.7 573.9c-15.2 0-30.9-15.2-30.9-30.9 0.5-15.7 15.7-31.3 30.9-31.3 23.7 0 39.4 15.7 39.4 31.3-0.1 15.7-15.7 30.9-39.4 30.9z m-171.3 0c-15.2 0-30.9-15.2-30.9-30.9s15.7-31.3 30.9-31.3c23.7 0 38.9 15.7 38.9 31.3 0.5 15.7-15.2 30.9-38.9 30.9zM952 613.3C952 488.5 827.2 387 687.3 387c-148 0-264.7 101.5-264.7 226.3 0 124.8 116.7 225.8 264.7 225.8 31.3 0 62.6-8.1 93.5-15.7l85.9 47-23.7-77.8c62.5-47 109-109.1 109-179.3z" p-id="2887">
</path>
</svg>
위 코드 를.svg 파일 에 저장 합 니 다.예 를 들 어 wx.svg 는/src/svg 디 렉 터 리 에 저장 하면 준비 작업 이 완 료 됩 니 다.
이 어 사용 하려 면 간단 합 니 다.vue 구성 요소 에 직접 이렇게 쓰 십시오.

<template>
  <icon class="wx-icon" name="wx"></icon></template>

페이지 를 새로 고 칠 때 콘 솔 을 열 면 페이지 에 이 wx.svg 파일 을 불 러 오 는 것 을 볼 수 있 습 니 다.그러면 svg 파일 의 필요 에 따라 도입 할 수 있 습 니 다.
React 에서 Svg 사용 하기
React 에 서 는 Svg 를 vue 와 마찬가지 로 3 가지 방안 이 존재 합 니 다.하 나 는 react 의 reader 방법 에 svg 코드 를 직접 쓰 는 것 입 니 다.두 번 째 는 모든 svg 그리 기 코드 를 한 파일 에 넣 은 다음 이 파일 을 한꺼번에 불 러 오고 use 태그 로 응답 하 는 svg 그림 을 참조 하 며 세 번 째 는 플러그 인 을 사용 하여 필요 에 따라 도입 하 는 것 입 니 다.
첫 번 째 렌 더 링 방법 에 svg 를 직접 쓰 는 방법 은 더 이상 말 하지 않 겠 습 니 다.두 번 째 방법 도 간단 합 니 다.vue 와 마찬가지 로 쓰기 에 있어 서 만 주의해 야 합 니 다.

render() {
  return (
   <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    style={{position:'absolute',width:0,height:0}}>
    <defs>
     <symbol viewBox="0 0 26 31" id="location">
      <path fill="#FFF" fillRule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
     </symbol>
     <symbol viewBox="0 0 14 8" id="arrow">
      <path fill="#FFF" fillRule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
     </symbol>
    </svg>
   )
}
주로 주의해 야 합 니 다.react 는 jsx 문법 을 사용 하기 때문에 나타 나 는-연결 문 자 를 허용 하지 않 기 때문에 fill-rule 과 같은 속성 은 fillRule 로 써 야 합 니 다.인용 할 때 도 마찬가지 입 니 다.

//          `xlink:href`     xlinkHref<svg className="arrow-left">
  <use xlinkhref="#arrow-left" rel="external nofollow" ></use>
 </svg>
세 번 째 는 필요 에 따라 도입 하고 현재 필요 한 svg 모양 만 불 러 옵 니 다.마찬가지 로 모든 svg 그림 을 하나의 파일 로 저장 한 다음 에 사용 해 야 할 곳 으로 참조 합 니 다.Github 에 react-svg 프로젝트 가 있 는데 이 프로젝트 내 부 는 SVGInjector 에 대한 포장 입 니 다.
react-svg 를 설치 하면 아래 와 같이 사용 할 수 있 습 니 다.

import ReactSVG from 'react-svg'

ReactDOM.render(
 <ReactSVG
  path="atomic.svg"
  callback={svg => console.log(svg)}
  className="example"
 />,
 document.querySelector('.Root')
)
일반적으로 작은 아이콘 을 사용 할 때 만 svg 를 고려 합 니 다.이런 작은 아이콘 들 은 보통 심 플 하고 그리 기 어렵 지 않 습 니 다.그러나 대부분 상황 에서 스스로 그 릴 필요 가 없습니다.많은 사이트 에서 svg 의 아이콘 다운 로드 를 제공 합 니 다.예 를 들 어 아 리 의 iconformant 는 아이콘 의 수량 이 많 고 대부분 수 요 를 만족 시 킬 수 있 습 니 다.또한,비슷 한 사 이 트 는 easyicon,icomoon 등 도 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
페이지 구성 요소(소결)를 react 로 직접 쓰 려 고 시도 합 니 다.
vue 2 급 경로 설정 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage