zoukankan      html  css  js  c++  java
  • [React] Render Basic SVG Components in React

    React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG components in ReactJS.

    Creating SVG components with React allows you to inline SVG. Inline SVG has an advantage that it can be styled with CSS just like the rest of your webpage and doesn't need a separate web request to load.

    An additional advantage is of-course that you can use component props to customize the contents of the SVG.

    HTML   Babel  Result
    Edit on 
    const App = ({size = "34px"}) => {
      return (
        
    <svg width={size} height={size} x="0px" y="0px" viewBox="0 0 100 100"><path d="M88.27,34.403c-5.282-5.611-12.564-9.205-19.881-11.337c-8.683-2.53-18.01-3.141-26.968-1.985  C33.174,22.144,24.9,24.6,17.933,29.255c-5.649,3.774-10.688,9.146-12.338,15.911C5.21,46.742,5.009,48.385,5,50.008  C5.09,65.526,21.373,74.643,34.624,77.74c9.038,2.112,18.502,2.273,27.629,0.643c7.996-1.428,15.867-4.436,22.315-9.443  c5.37-4.169,9.45-9.908,10.296-16.764C95.681,45.548,92.742,39.154,88.27,34.403z M89.297,51.863  c-0.001-0.06-0.089,0.583-0.119,0.733c-0.063,0.321-0.136,0.641-0.217,0.958c-0.179,0.701-0.401,1.391-0.662,2.066  c-0.006,0.016-0.049,0.12-0.087,0.214c-0.042,0.095-0.09,0.204-0.097,0.219c-0.14,0.305-0.288,0.606-0.443,0.904  c-0.347,0.666-0.731,1.312-1.145,1.938c-0.192,0.29-0.391,0.575-0.596,0.856c-0.05,0.069-0.281,0.367-0.262,0.346  c-0.025,0.031-0.05,0.063-0.075,0.094c-0.501,0.618-1.031,1.211-1.585,1.782c-0.52,0.535-1.061,1.049-1.619,1.544  c-0.286,0.253-0.576,0.501-0.87,0.743c-0.179,0.147-0.36,0.291-0.541,0.436c-0.028,0.022-0.049,0.039-0.07,0.056  c-0.029,0.02-0.063,0.045-0.107,0.076c-1.384,0.997-2.796,1.934-4.287,2.767c-3.382,1.89-6.052,2.94-9.883,4.036  c-8.1,2.317-16.322,2.795-24.914,1.746c-0.024-0.003-0.146-0.019-0.227-0.03c-0.267-0.037-0.534-0.077-0.801-0.118  c-0.486-0.075-0.971-0.156-1.454-0.242c-1.047-0.187-2.089-0.401-3.124-0.643c-1.908-0.446-3.794-0.986-5.645-1.629  c-0.85-0.295-1.686-0.62-2.523-0.949c-0.053-0.021-0.096-0.038-0.134-0.052c-0.015-0.007-0.032-0.014-0.054-0.023  c-0.201-0.086-0.402-0.174-0.602-0.263c-0.475-0.211-0.946-0.43-1.414-0.657c-1.576-0.765-3.11-1.62-4.579-2.575  c-0.669-0.435-1.315-0.9-1.962-1.366c-0.044-0.032-0.078-0.056-0.107-0.076c-0.021-0.017-0.042-0.034-0.07-0.056  c-0.121-0.097-0.242-0.192-0.362-0.29c-0.356-0.289-0.706-0.585-1.049-0.889c-1.154-1.021-2.233-2.129-3.204-3.326  c-0.077-0.095-0.508-0.672-0.086-0.102c-0.084-0.113-0.168-0.225-0.251-0.338c-0.205-0.281-0.404-0.567-0.596-0.856  c-0.414-0.626-0.798-1.272-1.145-1.938c-0.155-0.297-0.303-0.599-0.443-0.904c-0.06-0.131-0.315-0.768-0.037-0.064  c-0.049-0.123-0.099-0.246-0.147-0.369c-0.261-0.675-0.483-1.365-0.662-2.066c-0.081-0.317-0.153-0.637-0.217-0.958  c-0.039-0.196-0.116-0.736-0.118-0.704c-0.065-0.627-0.104-1.252-0.108-1.884c0.004-0.673,0.072-1.331,0.12-2  c0.001-0.003,0.001-0.005,0.002-0.009c0.03-0.161,0.055-0.323,0.086-0.483c0.068-0.354,0.146-0.705,0.235-1.054  c0.171-0.669,0.382-1.328,0.627-1.974c0.028-0.074,0.058-0.148,0.088-0.222c-0.106,0.269,0.081-0.194,0.131-0.304  c0.154-0.336,0.318-0.667,0.49-0.993c0.335-0.634,0.702-1.25,1.098-1.848c0.192-0.29,0.391-0.575,0.596-0.856  c0.083-0.113,0.168-0.225,0.251-0.338c-0.422,0.57,0.06-0.07,0.154-0.185c1.002-1.224,2.116-2.353,3.308-3.393  c0.288-0.252,0.581-0.498,0.878-0.739c0.12-0.098,0.242-0.193,0.362-0.29c0.028-0.022,0.049-0.039,0.07-0.056  c0.029-0.02,0.063-0.045,0.107-0.076c0.713-0.514,1.426-1.023,2.167-1.498c1.479-0.948,3.022-1.797,4.607-2.555  c0.391-0.187,0.785-0.369,1.182-0.545c0.16-0.071,0.321-0.141,0.481-0.211c0.06-0.026,0.106-0.047,0.144-0.063  c0.041-0.016,0.095-0.037,0.164-0.064c0.922-0.362,1.844-0.718,2.781-1.038c1.859-0.634,3.752-1.167,5.666-1.604  c4.166-0.952,7.661-1.364,12.041-1.465c2.179-0.05,4.36,0.004,6.533,0.165c1.008,0.074,2.015,0.173,3.019,0.294  c-0.011-0.001,0.601,0.08,0.593,0.077c0.147,0.021,0.293,0.042,0.44,0.064c0.584,0.087,1.167,0.183,1.748,0.287  c3.873,0.692,7.634,1.781,11.292,3.221c0.07,0.028,0.124,0.049,0.165,0.065c0.038,0.017,0.084,0.037,0.143,0.063  c0.2,0.088,0.401,0.175,0.601,0.264c0.395,0.177,0.788,0.36,1.178,0.548c0.84,0.405,1.667,0.835,2.48,1.292  c1.483,0.834,2.904,1.763,4.272,2.776c0.027,0.02,0.046,0.034,0.061,0.045c0.008,0.006,0.013,0.01,0.021,0.017  c0.151,0.121,0.302,0.241,0.452,0.363c0.325,0.266,0.645,0.538,0.96,0.816c0.613,0.543,1.205,1.11,1.772,1.702  c0.499,0.522,0.978,1.063,1.433,1.623c0.026,0.032,0.051,0.064,0.077,0.096c-0.028-0.032,0.209,0.274,0.261,0.344  c0.245,0.337,0.482,0.68,0.709,1.03c0.371,0.572,0.716,1.16,1.031,1.764c0.155,0.297,0.303,0.599,0.443,0.904  c0.056,0.121,0.108,0.244,0.163,0.365c-0.326-0.722,0.036,0.106,0.091,0.254c0.231,0.616,0.429,1.244,0.592,1.881  c0.081,0.317,0.153,0.637,0.217,0.958c0.032,0.161,0.057,0.322,0.088,0.483c0.009,0.045,0.016,0.082,0.023,0.113  c0.001,0.006,0.001,0.012,0.002,0.018C89.415,49.321,89.417,50.582,89.297,51.863z"></path><path d="M62.923,46.196c-4.297,0-7.781-3.484-7.781-7.781c0-4.028,3.061-7.342,6.984-7.741c-3.513-2.209-7.67-3.488-12.126-3.488  C37.4,27.186,27.187,37.4,27.187,50C27.187,62.6,37.4,72.814,50,72.814S72.813,62.6,72.813,50c0-3.57-0.82-6.947-2.282-9.956  C69.782,43.559,66.661,46.196,62.923,46.196z"></path></svg>
      );
    }
    
    ReactDOM.render(
      <App size={"100px"}/>,
      document.getElementById('root')
    );
  • 相关阅读:
    css3 Gradient背景
    ArrayList源码解析(一)
    css3 @font-face
    ArrayList源码解析(二)自动扩容机制与add操作
    ArrayList源码解析(三)
    JavaScript基础
    JavaScript中的字符串方法总结
    一个完整的HTTP请求过程
    HTML5学习
    JS编程
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6392347.html
Copyright © 2011-2022 走看看