Svg 通过修改xlinkHref动态改变显示图片

1.原因

一般设计通过iconfont生成项目icon文件，通过更改icon code动态改变icon展示，由于最新版设计不是icon而是多个svg图片，通过不同的条件判断来更改渲染的图片。

例如左侧的类似icon的svg图片，有点击时，未点击以及分不同主题的点击，未点击的svg图。如果通过代码逻辑来替换image的src会特别麻烦以及繁琐。则可通过动态更改svg的xlinkHref的值来动态改变显示的svg图片。

2.实现

按照上图的逻辑，不同的菜单一般会有不同的code来区分，先建立一个code对应svg图片名称的map。

const iconMap = {  
    // 协作  
    'xxx.code.project.cooperation': 'xiezuo',  
    // 部署  
    'xxx.code.project.deploy': 'bushu',  
    // 开发  
    'xxx.code.project.develop': 'kaifa',  
    //  测试  
    'xxx.code.project.test': 'ceshi',  
    'xxx.code.project.demand': 'xuqiu',  
    'xxx.code.site.infra': 'jichu',  
    'xxx.code.project.doc': 'wendang',  
    // 设置  
    'xxx.code.project.setting': 'shezhi',  
    // 组织层管理  
    'xxx.code.organization.manager': 'guanli',  
    //  组织层设置  
    'xxx.code.organization.setting': 'shezhi',  
    //  平台层管理  
    'xxx.code.site.manager': 'guanli',
    //  平台层设置  
    'xxx.code.site.setting': 'shezhi',  
    //  平台层市场  
    'xxx.code.site.market': 'shichang',  
    //  平台层hzero  
    'xxx.code.site.hzero.manager': 'hzero',  
    //  用户层 个人  
    'xxx.code.person.setting': 'shezhi',
};
复制代码

将svg图片保存到项目里，以部署菜单为例

建立RequireSvgResources.js文件用于批量导入svg图片

const req = require.context('../header/style/icons', false, /\.sprite.svg$/);
const requireAll = (requireContext) => requireContext.keys().map(requireContext);
requireAll(req);
复制代码

建立MenuSideIcon.js文件，用于根据传入不同的svgname名称来替换svg图片

import React from 'react';
export default ({ name }) => (  
    <svg style={{ height: 30 }} aria-hidden="true">    
        <use xlinkHref={`#${name}`} />  
    </svg>
);
复制代码

在index.js中

import './RequireSvgResources';
import MenuSideIcon from './MenuSideIcon';

const menuCode = 'xxx.code.project.deploy';
export default () => {
    const renderMenuSideIconName = (code) => {
        const str = IconMap[code];
        if (点击时) {
            return `${str}click.sprite`;
        } else if (新主题) {
            return `${str}new.sprite`;
        }
        return `${str}.sprite`;
    }
    return (
        <MenuSideIcon name={renderMenuSideIconName(menuCode)} />    
)}
复制代码