Question

我试图将Awesome字体的图标语法更改为camelCase（Reactjs）这是图标堡垒真棒（图标名称）这就是我尝试更改的方式

app.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { faFortAwesome } from '@fortawesome/free-solid-svg-icons';

library.add(faFortAwesome);

Component.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 <FontAwesomeIcon 
  icon="fortawesome" 
  color="#6DB65B"
  size="2x"
  />

这是我得到的错误。

./ src / App.js 20：12-25“ @ fortawesome / free-solid-svg-icons”不包含名为“ faFortAwesome”的导出。

任何帮助将不胜感激。

Answer 1

<script>
var svg = d3.select("#bar"),
    margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.08);

var y = d3.scaleLinear()
    .range([height, 0]);

var color = d3.scaleOrdinal()
    .range(["#7fc97f", "#beaed4", "#fdc086", "#ffff99"]);

var keys;

d3.csv("/data.csv", function(d, i, columns) {
    for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
    d.total = t;
    return d;
}, function(error, data) {
    if (error) throw error;

    keys = data.columns.slice(1);

    x.domain(data.map(function(d) { return d.Year; }));
    y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
    color.domain(keys);

    var stackData = d3.stack().keys(keys)(data);
    stackData.forEach(element => {
        var keyIdx = keys.findIndex(e => e === element.key);
        element.forEach(e2 => { e2.keyIdx = keyIdx; });
    });

    g.append("g")
    .selectAll("g")
    .data(stackData)
    .enter().append("g")
        .attr("fill", function(d) { return color(d.key); })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
        .attr("x", function(d) { return x(d.data.Year); })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
        .attr("width", x.bandwidth())
        .attr("stroke", "green");

    rect = g.selectAll("rect");
});

d3.selectAll("input")
    .on("change", changed);

function changed() {
    if (this.value === "step1") transitionStep1();
    else if (this.value === "step2") transitionStep2();
}

function transitionStep1() {
    rect.transition()
    .attr("y", function(d) { return y(d[1]); })
    .attr("x", function(d) { return x(d.data.Year); })
    .attr("width", x.bandwidth())
    .attr("stroke", "green");
}

function transitionStep2() {
    rect.transition()
    .attr("x", function(d, i) { return x(d.data.Year) + x.bandwidth() / (keys.length+1) * d.keyIdx; })
    .attr("width", x.bandwidth() / (keys.length+1))
    .attr("y", function(d) { return y(d[1] - d[0]); })
    .attr("stroke", "red");
}
</script>

此行在“ @ fortawesome / free-solid-svg-icons”中搜索faFortAwesome函数。您无法更改其名称，因为这样将找不到正确的函数名称。如果要更改名称，可以添加如下内容。

import { faFortAwesome } from '@fortawesome/free-solid-svg-icons';

将Font Awesome转换为camelCase（Reactjs）

1 个答案: