diff --git a/src/components/ComponentIndexPage/ComponentIndexList.js b/src/components/ComponentIndexPage/ComponentIndexList.js index 3293f87e31d..a11c429bcfe 100644 --- a/src/components/ComponentIndexPage/ComponentIndexList.js +++ b/src/components/ComponentIndexPage/ComponentIndexList.js @@ -1,5 +1,4 @@ /* eslint-disable global-require */ -/* eslint-disable import/no-dynamic-require */ /* eslint-disable no-undef */ import { Link, Row, Column, Tag, TooltipIcon } from 'carbon-components-react'; import PropTypes from 'prop-types'; @@ -7,9 +6,29 @@ import React from 'react'; const componentImg = require('./images/placeholderCompIndex.svg'); -// TODO: Render icons dynamically based on framework & designAsset info. +const angularIcon = require('./images/Angular.svg'); const reactIcon = require('./images/React.svg'); +const vanillaIcon = require('./images/Vanilla.svg'); +const vueIcon = require('./images/Vue.svg'); + +const axureIcon = require('./images/Axure.svg'); +const figmaIcon = require('./images/Figma.svg'); const sketchIcon = require('./images/Sketch.svg'); +const xdIcon = require('./images/XD.svg'); + +const frameworkIcons = { + Angular: angularIcon, + React: reactIcon, + Vanilla: vanillaIcon, + Vue: vueIcon, +}; + +const designAssetIcons = { + Axure: axureIcon, + Figma: figmaIcon, + Sketch: sketchIcon, + XD: xdIcon, +}; const href = '/get-started/about-carbon'; @@ -59,14 +78,22 @@ function ComponentIndexList({ items }) {