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')
    );
  • 相关阅读:
    MVC+jQuery开发B/S系统②:表单绑定
    插入排序
    笔记:实例管理
    文件读写冲突的解决办法:ReaderWriterLock
    MVC+jQuery数据绑定①:列表绑定(二)
    MVC+jQuery数据绑定①:列表绑定(三)
    非递归求 T(n) = [T(n1),n,T(n1)] 已知T1=[1]
    笔记:契约总结
    面试题:1~ n1 有n个数,是有序的,找出重复的那个数。
    Thread系列——ThreadPool
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6392347.html
Copyright © 2011-2022 走看看