openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React, {PropTypes} from 'react';
  17 import Configuration from 'sdc-app/config/Configuration.js';
  18
  19 export default class SVGIcon extends React.Component {
  20
  21         static propTypes = {
  22                 name: PropTypes.string.isRequired,
  23                 onClick: PropTypes.func,
  24                 label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  25                 labelPosition: PropTypes.string,
  26                 className: PropTypes.string,
  27                 iconClassName: PropTypes.string,
  28                 labelClassName: PropTypes.string
  29         };
  30
  31         static defaultProps = {
  32                 name: '',
  33                 label: '',
  34                 className: '',
  35                 iconClassName: '',
  36                 labelClassName: '',
  37                 labelPosition: 'bottom'
  38         };
  39
  40         render() {
  41                 let {name, onClick, label, className, iconClassName, labelClassName, labelPosition, ...other} = this.props;
  42                 let classes = `svg-icon-wrapper ${className} ${onClick ? 'clickable' : ''} ${labelPosition}`;
  43
  44                 return (
  45                         <div {...other} onClick={onClick} className={classes}>
  46                                 <svg className={`svg-icon ${name} ${iconClassName}`}  >
  47                                         <use href={Configuration.get('appContextPath') + '/resources/images/svg/' + this.props.name + '.svg#' + this.props.name + '_icon' }
  48                                                  xlinkHref={Configuration.get('appContextPath') + '/resources/images/svg/' + this.props.name + '.svg#' + this.props.name + '_icon' } />
  49                                 </svg>
  50                                 {label && <span className={`svg-icon-label ${labelClassName}`}>{label}</span>}
  51                         </div>
  52                 );
  53         }
  54 }